[SSE] debug toolbar's layout

This commit is contained in:
Maxim Kadushkin 2017-04-28 19:42:01 +03:00
parent be7577dd5b
commit aed251a6ea
2 changed files with 46 additions and 16 deletions

View file

@ -46,19 +46,18 @@
<section class="box-panels"> <section class="box-panels">
<section class="panel" data-tab="home"> <section class="panel" data-tab="home">
<div class="group"> <div class="group">
<div class="elset"> <div class="elset font-attr-top">
<span class="btn-slot" style="float: left; width: 90px;" id="slot-field-fontname"></span> <span class="btn-slot" id="slot-field-fontname"></span>
<span class="btn-slot" style="float: left; width: 45px; margin-left: 2px;" id="slot-field-fontsize"></span> <span class="btn-slot" id="slot-field-fontsize"></span>
<span class="btn-slot border" id="slot-btn-incfont" style="margin-left: 2px;"></span> <span class="btn-slot border" id="slot-btn-incfont"></span>
<span class="btn-slot border" id="slot-btn-decfont" style="margin-left: 2px;"></span> <span class="btn-slot border" id="slot-btn-decfont"></span>
</div> </div>
<div class="elset"> <div class="elset font-attr">
<span class="btn-slot split" id="slot-btn-bold"></span> <span class="btn-slot" id="slot-btn-bold"></span>
<span class="btn-slot split" id="slot-btn-italic"></span> <span class="btn-slot" id="slot-btn-italic"></span>
<span class="btn-slot split" id="slot-btn-underline"></span> <span class="btn-slot" id="slot-btn-underline"></span>
<span class="btn-slot split" id="slot-btn-fontcolor"></span> <span class="btn-slot split" id="slot-btn-fontcolor"></span>
<span class="btn-slot split" id="slot-btn-fillparag"></span> <span class="btn-slot split" id="slot-btn-fillparag"></span>
<div class="separator short" style="margin: 0 6px;"></div>
<span class="btn-slot split" id="slot-btn-borders"></span> <span class="btn-slot split" id="slot-btn-borders"></span>
</div> </div>
</div> </div>
@ -69,23 +68,23 @@
<span class="btn-slot split" id="slot-btn-middle"></span> <span class="btn-slot split" id="slot-btn-middle"></span>
<span class="btn-slot split" id="slot-btn-bottom"></span> <span class="btn-slot split" id="slot-btn-bottom"></span>
<span class="btn-slot split" id="slot-btn-wrap"></span> <span class="btn-slot split" id="slot-btn-wrap"></span>
<span class="btn-slot" id="slot-btn-text-orient"></span> <span class="btn-slot split" id="slot-btn-text-orient"></span>
</div> </div>
<div class="elset"> <div class="elset">
<span class="btn-slot split" id="slot-btn-align-left"></span> <span class="btn-slot split" id="slot-btn-align-left"></span>
<span class="btn-slot split" id="slot-btn-align-center"></span> <span class="btn-slot split" id="slot-btn-align-center"></span>
<span class="btn-slot split" id="slot-btn-align-right"></span> <span class="btn-slot split" id="slot-btn-align-right"></span>
<span class="btn-slot split" id="slot-btn-align-just"></span> <span class="btn-slot split" id="slot-btn-align-just"></span>
<span class="btn-slot" id="slot-btn-merge"></span> <span class="btn-slot split" id="slot-btn-merge"></span>
</div> </div>
</div> </div>
<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" id="slot-btn-formula"></span> <span class="btn-slot split" id="slot-btn-formula"></span>
</div> </div>
<div class="elset"> <div class="elset">
<span class="btn-slot" id="slot-btn-named-range"></span> <span class="btn-slot split" id="slot-btn-named-range"></span>
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
@ -114,10 +113,10 @@
<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" id="slot-btn-cell-ins"></span> <span class="btn-slot split" id="slot-btn-cell-ins"></span>
</div> </div>
<div class="elset"> <div class="elset">
<span class="btn-slot" id="slot-btn-cell-del"></span> <span class="btn-slot split" id="slot-btn-cell-del"></span>
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>

View file

@ -14,6 +14,29 @@
display: table; display: table;
width: 100%; width: 100%;
} }
.font-attr {
> .btn-slot:not(:last-child):not(.split) {
margin-right: 8px;
}
> .btn-slot.split:not(:last-child) {
margin-right: 5px;
}
}
.font-attr-top {
width: 186px;
> .btn-slot {
float: left;
&:not(:first-child) {
margin-left: 2px;
}
}
}
} }
.toolbar-mask { .toolbar-mask {
@ -215,3 +238,11 @@
background-color: @gray-light; background-color: @gray-light;
border: 1px solid @gray; border: 1px solid @gray;
} }
#slot-field-fontname {
width: 91px;
}
#slot-field-fontsize {
width: 45px;
}