diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index a46567a72..ce0523b2d 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -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); + } + } + } + } \ No newline at end of file diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template index d7d0f4655..a4cacc540 100644 --- a/apps/presentationeditor/main/app/template/Toolbar.template +++ b/apps/presentationeditor/main/app/template/Toolbar.template @@ -152,7 +152,7 @@
- +
@@ -165,7 +165,7 @@
-
+
diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js index 07a57cc83..9a6fb6211 100644 --- a/apps/presentationeditor/main/app/view/Transitions.js +++ b/apps/presentationeditor/main/app/view/Transitions.js @@ -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; diff --git a/apps/presentationeditor/main/resources/less/transitions.less b/apps/presentationeditor/main/resources/less/transitions.less index 4fcf450f5..94bec0766 100644 --- a/apps/presentationeditor/main/resources/less/transitions.less +++ b/apps/presentationeditor/main/resources/less/transitions.less @@ -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; } } \ No newline at end of file