[PE] Refactoring transition tab: Fix Bug 54316, Fix Bug 54313.
This commit is contained in:
Julia Radzhabova
parent
aac7806d0a
commit
ec2ea6e364
|
|
@ -352,4 +352,50 @@
|
|||
|
||||
.combo-slicer-style {
|
||||
.combo-textart(60px, 4px);
|
||||
}
|
||||
|
||||
.combo-transitions {
|
||||
@combo-dataview-height: 46px;
|
||||
@combo-dataview-height-calc: calc(40px + 2 * @scaled-two-px-value + 2 * @scaled-one-px-value);
|
||||
@combo-dataview-item-margins: @scaled-two-px-value;
|
||||
@combo-dataview-button-width: 15px;
|
||||
|
||||
height: @combo-dataview-height;
|
||||
height: @combo-dataview-height-calc;
|
||||
|
||||
.view {
|
||||
margin-right: -@combo-dataview-button-width;
|
||||
padding-right: @combo-dataview-button-width;
|
||||
}
|
||||
|
||||
.view .dataview, .dropdown-menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: @combo-dataview-button-width;
|
||||
height: @combo-dataview-height;
|
||||
height: @combo-dataview-height-calc;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0px;
|
||||
margin: @combo-dataview-item-margins 0 0 @combo-dataview-item-margins;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.menu-picker-container {
|
||||
.last-item {
|
||||
margin-bottom: @combo-dataview-item-margins;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.item {
|
||||
&:hover:not(.selected) {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
<div class="group small">
|
||||
<div class="elset font-normal">
|
||||
<label id="transit-duration"></label>
|
||||
<span id="transit-spin-duration" class="btn-slot text spinner"></span>
|
||||
<span id="transit-spin-duration" class="btn-slot text spinner" style="margin-left: 10px;"></span>
|
||||
</div>
|
||||
<div class="elset">
|
||||
<span class="btn-slot text" id="transit-button-preview"></span>
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
</div>
|
||||
<div class="elset font-normal">
|
||||
<span class="btn-slot text" id="transit-checkbox-delay"></span>
|
||||
<div id="transit-spin-delay" class="btn-slot text spinner"></div>
|
||||
<div id="transit-spin-delay" class="btn-slot text spinner" style="margin-left: 10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator long"></div>
|
||||
|
|
|
|||
|
|
@ -130,11 +130,14 @@ define([
|
|||
{title: this.textUnCover, imageUrl: "transition-uncover", value: Asc.c_oAscSlideTransitionTypes.UnCover, id: Common.UI.getId()},
|
||||
{title: this.textCover, imageUrl: "transition-cover", value: Asc.c_oAscSlideTransitionTypes.Cover, id: Common.UI.getId()},
|
||||
{title: this.textClock, imageUrl: "transition-clock", value: Asc.c_oAscSlideTransitionTypes.Clock, id: Common.UI.getId()},
|
||||
{title: this.textZoom, imageUrl: "transition-zoom", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()}
|
||||
{title: this.textZoom, imageUrl: "transition-zoom", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId(), cls: 'last-item'}
|
||||
];
|
||||
this._arrEffectName.forEach(function(item) {
|
||||
item.tip = item.title;
|
||||
});
|
||||
|
||||
this.listEffects = new Common.UI.ComboDataView({
|
||||
cls: 'combo-styles',
|
||||
cls: 'combo-transitions',
|
||||
itemWidth: 87,
|
||||
itemHeight: 40,
|
||||
enableKeyEvents: true,
|
||||
|
|
@ -142,6 +145,7 @@ define([
|
|||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: '-16, 0',
|
||||
delayRenderTips: true,
|
||||
beforeOpenHandler: function (e) {
|
||||
var cmp = this,
|
||||
menu = cmp.openButton.menu;
|
||||
|
|
|
|||
|
|
@ -1,63 +1,26 @@
|
|||
#transitions-panel {
|
||||
.item {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
.combo-transitions {
|
||||
.btn_item {
|
||||
color: @text-normal-ie;
|
||||
color: @text-normal;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.box-shadow(none);
|
||||
border-radius: @scaled-one-px-value-ie;
|
||||
border-radius: @scaled-one-px-value;
|
||||
border-width: calc(2*@scaled-one-px-value-ie) ;
|
||||
border-width: calc(@scaled-two-px-value);
|
||||
|
||||
&:hover{
|
||||
border-color: @border-preview-hover-ie;
|
||||
border-color: @border-preview-hover;
|
||||
.icon:not(svg) {
|
||||
width: @x-huge-btn-icon-size;
|
||||
height: @x-huge-btn-icon-size;
|
||||
min-width: 0;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
&.selected
|
||||
{
|
||||
border-color: @border-preview-select-ie;
|
||||
border-color: @border-preview-select;
|
||||
.caption{
|
||||
line-height: 18px;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.style{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.combo-dataview
|
||||
{
|
||||
&.disabled {
|
||||
.item {
|
||||
&:hover:not(.selected) {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spinner
|
||||
{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
.btn_item {
|
||||
color: @text-normal-ie;
|
||||
color: @text-normal;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon:not(svg) {
|
||||
width: @x-huge-btn-icon-size;
|
||||
height: @x-huge-btn-icon-size;
|
||||
min-width: 0;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.caption{
|
||||
line-height: 18px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue