updated toolbar styles according to drafts

This commit is contained in:
Maxim Kadushkin 2017-07-21 13:48:02 +03:00
parent 6f4e5620fa
commit 079cbe0a60
7 changed files with 30 additions and 22 deletions

View file

@ -132,6 +132,7 @@
.background-ximage(@image, @image2x, @w: auto, @h: auto) { .background-ximage(@image, @image2x, @w: auto, @h: auto) {
background-image: data-uri(%("%s",@image)); background-image: data-uri(%("%s",@image));
background-repeat: no-repeat;
@media @media
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2),

View file

@ -113,6 +113,14 @@
.inner-box-caption { .inner-box-caption {
line-height: 18px; line-height: 18px;
padding: 0 4px; padding: 0 4px;
display: flex;
align-items: center;
.caption {
max-width: 107px;
text-overflow: ellipsis;
overflow: hidden;
}
} }
.icon { .icon {
@ -120,6 +128,12 @@
height: @icon-size; height: @icon-size;
min-width: 0; min-width: 0;
} }
&.dropdown-toggle {
.caption {
max-width: 100px;
}
}
} }
.inner-box-icon { .inner-box-icon {
@ -202,7 +216,7 @@
&.x-huge, .btn-group.x-huge > & { &.x-huge, .btn-group.x-huge > & {
:not(svg).icon { :not(svg).icon {
.background-ximage('@{common-image-path}/controls/toolbarbig.png', '@{common-image-path}/controls/toolbarbig@2x.png', 96px); .background-ximage('@{common-image-path}/controls/toolbarbig.png', '@{common-image-path}/controls/toolbarbig@2x.png', 78px);
} }
} }
@ -327,7 +341,7 @@
&:not(.split) { &:not(.split) {
.btn-toolbar { .btn-toolbar {
&.dropdown-toggle { &.dropdown-toggle:not(.x-huge) {
width: 100%; width: 100%;
min-width: 28px; min-width: 28px;
} }

View file

@ -119,7 +119,7 @@
width: 86px; width: 86px;
height: 20px; height: 20px;
display: block; display: block;
.background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 100px); .background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px);
} }
} }
} }

View file

@ -127,16 +127,17 @@
text-align: center; text-align: center;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
color: #fff;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
&.left{ &.left{
box-shadow: 5px 0 20px 5px rgba(255, 255, 255, .8) box-shadow: 5px 0 20px 5px @tabs-bg-color
} }
&.right{ &.right{
box-shadow: -5px 0 20px 5px rgba(255, 255, 255, .8) box-shadow: -5px 0 20px 5px @tabs-bg-color
} }
} }
} }
@ -222,10 +223,6 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
&.adding {
margin-right: 5px;
}
} }
} }
@ -282,7 +279,7 @@
.button-normal-icon(review-prev, 17, @toolbar-big-icon-size); .button-normal-icon(review-prev, 17, @toolbar-big-icon-size);
.button-normal-icon(btn-dropcap, 18, @toolbar-big-icon-size); .button-normal-icon(btn-dropcap, 18, @toolbar-big-icon-size);
.button-normal-icon(~'x-huge .btn-pagebreak', 19, @toolbar-big-icon-size); .button-normal-icon(~'x-huge .btn-pagebreak', 19, @toolbar-big-icon-size);
.button-normal-icon(btn-editheader, 20, @toolbar-big-icon-size);
.button-normal-icon(btn-pageorient, 21, @toolbar-big-icon-size); .button-normal-icon(btn-pageorient, 21, @toolbar-big-icon-size);
.button-normal-icon(btn-pagemargins, 22, @toolbar-big-icon-size); .button-normal-icon(btn-pagemargins, 22, @toolbar-big-icon-size);
.button-normal-icon(btn-pagesize, 23, @toolbar-big-icon-size); .button-normal-icon(btn-pagesize, 23, @toolbar-big-icon-size);

View file

@ -33,11 +33,11 @@
<div class="separator long"></div> <div class="separator long"></div>
<div class="group"> <div class="group">
<div class="elset"> <div class="elset">
<span class="btn-slot adding" id="slot-btn-copy"></span> <span class="btn-slot split" id="slot-btn-copy"></span>
<span class="btn-slot" id="slot-btn-paste"></span> <span class="btn-slot" id="slot-btn-paste"></span>
</div> </div>
<div class="elset"> <div class="elset">
<span class="btn-slot adding" id="slot-btn-undo"></span> <span class="btn-slot split" id="slot-btn-undo"></span>
<span class="btn-slot" id="slot-btn-redo"></span> <span class="btn-slot" id="slot-btn-redo"></span>
</div> </div>
</div> </div>
@ -85,11 +85,11 @@
<div class="separator long" style="margin-left: 5px;"></div> <div class="separator long" style="margin-left: 5px;"></div>
<div class="group"> <div class="group">
<div class="elset"> <div class="elset">
<span class="btn-slot adding" id="slot-btn-clearstyle"></span> <span class="btn-slot split" id="slot-btn-clearstyle"></span>
<span class="btn-slot split" id="slot-btn-colorschemas"></span> <span class="btn-slot split" id="slot-btn-colorschemas"></span>
</div> </div>
<div class="elset"> <div class="elset">
<span class="btn-slot adding" id="slot-btn-copystyle"></span> <span class="btn-slot split" id="slot-btn-copystyle"></span>
<span class="btn-slot" id="slot-btn-mailrecepients"></span> <span class="btn-slot" id="slot-btn-mailrecepients"></span>
</div> </div>
</div> </div>
@ -106,12 +106,8 @@
</section> </section>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">
<div class="elset"> <span class="btn-slot text x-huge btn-pagebreak"></span>
<span class="btn-slot text btn-pagebreak"></span> <span class="btn-slot text x-huge" id="slot-btn-editheader"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-btn-editheader"></span>
</div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group"> <div class="group">

View file

@ -528,7 +528,7 @@ define([
this.btnEditHeader = new Common.UI.Button({ this.btnEditHeader = new Common.UI.Button({
id: 'id-toolbar-btn-editheader', id: 'id-toolbar-btn-editheader',
cls: 'btn-toolbar', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-editheader', iconCls: 'btn-editheader',
caption: me.capBtnInsHeader, caption: me.capBtnInsHeader,
menu: true menu: true

View file

@ -279,7 +279,7 @@
.button-normal-icon(btn-underline, 35, @toolbar-icon-size); .button-normal-icon(btn-underline, 35, @toolbar-icon-size);
.button-normal-icon(btn-undo, 36, @toolbar-icon-size); .button-normal-icon(btn-undo, 36, @toolbar-icon-size);
.button-normal-icon(btn-hidenchars, 37, @toolbar-icon-size); .button-normal-icon(btn-hidenchars, 37, @toolbar-icon-size);
.button-normal-icon(btn-editheader, 39, @toolbar-icon-size); //.button-normal-icon(btn-editheader, 39, @toolbar-icon-size);
.button-normal-icon(btn-mailrecepients, 40, @toolbar-icon-size); .button-normal-icon(btn-mailrecepients, 40, @toolbar-icon-size);
.button-normal-icon(btn-synch, 42, @toolbar-icon-size); .button-normal-icon(btn-synch, 42, @toolbar-icon-size);
.button-normal-icon(btn-save-coauth, 41, @toolbar-icon-size); .button-normal-icon(btn-save-coauth, 41, @toolbar-icon-size);