Use three toolbars for comments editor so they dont wrap even on small screens

This commit is contained in:
Kovid Goyal 2018-03-22 12:15:52 +05:30
parent 0d260e4e5b
commit 26aee58453
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C
2 changed files with 11 additions and 5 deletions

View File

@ -1,5 +1,7 @@
<svg width="128" height="128" viewBox="0 0 128 128">
<svg viewBox="0 0 128 128" height="128" width="128">
<g transform="translate(0,-924.36216)">
<path d="m 117,1018.6479 0,7.5714 q 0,1.5379 -1.12388,2.6618 -1.12389,1.1239 -2.66183,1.1239 l -98.428576,0 q -1.537946,0 -2.66183,-1.1239 Q 11,1027.7572 11,1026.2193 l 0,-7.5714 q 0,-1.538 1.123884,-2.6619 1.123884,-1.1239 2.66183,-1.1239 l 98.428576,0 q 1.53794,0 2.66183,1.1239 1.12388,1.1239 1.12388,2.6619 z m -22.714286,-22.71433 0,7.57143 q 0,1.5379 -1.123884,2.6618 -1.123884,1.1239 -2.66183,1.1239 l -53,0 q -1.537946,0 -2.66183,-1.1239 -1.123884,-1.1239 -1.123884,-2.6618 l 0,-7.57143 q 0,-1.53795 1.123884,-2.66183 1.123884,-1.12388 2.66183,-1.12388 l 53,0 q 1.537946,0 2.66183,1.12388 1.123884,1.12388 1.123884,2.66183 z m 15.142856,-22.71428 0,7.57142 q 0,1.53795 -1.12388,2.66183 -1.12389,1.12388 -2.66183,1.12388 l -83.285717,0 q -1.537947,0 -2.661831,-1.12388 -1.123883,-1.12388 -1.123883,-2.66183 l 0,-7.57142 q 0,-1.53796 1.123883,-2.66184 1.123884,-1.12388 2.661831,-1.12388 l 83.285717,0 q 1.53794,0 2.66183,1.12388 1.12388,1.12388 1.12388,2.66184 z m -22.714284,-22.7143 0,7.57143 q 0,1.53795 -1.123884,2.66183 -1.123884,1.12389 -2.661831,1.12389 l -37.857142,0 q -1.537947,0 -2.661831,-1.12389 -1.123884,-1.12388 -1.123884,-2.66183 l 0,-7.57143 q 0,-1.53794 1.123884,-2.66183 1.123884,-1.12387 2.661831,-1.12387 l 37.857142,0 q 1.537947,0 2.661831,1.12387 1.123884,1.12389 1.123884,2.66183 z" />
<path d="m 117,1018.6479 v 7.5714 q 0,1.5379 -1.12388,2.6618 -1.12389,1.1239 -2.66183,1.1239 H 14.785714 q -1.537946,0 -2.66183,-1.1239 Q 11,1027.7572 11,1026.2193 v -7.5714 q 0,-1.538 1.123884,-2.6619 1.123884,-1.1239 2.66183,-1.1239 h 98.428576 q 1.53794,0 2.66183,1.1239 Q 117,1017.1099 117,1018.6479 Z M 94.285714,995.93357 v 7.57143 q 0,1.5379 -1.123884,2.6618 -1.123884,1.1239 -2.66183,1.1239 h -53 q -1.537946,0 -2.66183,-1.1239 -1.123884,-1.1239 -1.123884,-2.6618 v -7.57143 q 0,-1.53795 1.123884,-2.66183 1.123884,-1.12388 2.66183,-1.12388 h 53 q 1.537946,0 2.66183,1.12388 1.123884,1.12388 1.123884,2.66183 z m 15.142856,-22.71428 v 7.57142 q 0,1.53795 -1.12388,2.66183 -1.12389,1.12388 -2.66183,1.12388 H 22.357143 q -1.537947,0 -2.661831,-1.12388 -1.123883,-1.12388 -1.123883,-2.66183 v -7.57142 q 0,-1.53796 1.123883,-2.66184 1.123884,-1.12388 2.661831,-1.12388 h 83.285717 q 1.53794,0 2.66183,1.12388 1.12388,1.12388 1.12388,2.66184 z m -22.714284,-22.7143 v 7.57143 q 0,1.53795 -1.123884,2.66183 -1.123884,1.12389 -2.661831,1.12389 H 45.071429 q -1.537947,0 -2.661831,-1.12389 -1.123884,-1.12388 -1.123884,-2.66183 v -7.57143 q 0,-1.53794 1.123884,-2.66183 1.123884,-1.12387 2.661831,-1.12387 h 37.857142 q 1.537947,0 2.661831,1.12387 1.123884,1.12389 1.123884,2.66183 z" />
<path d="M 2.970371,927.33253 H 125.02963 V 1049.3918 H 2.970371 Z"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#30a82d;stroke-width:3.94074321;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:3.94074312, 11.82222935;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -447,7 +447,8 @@ def create_comments_editor(container):
toolbars = E.div(style='flex-grow: 0')
toolbar1 = E.div(class_=TOOLBAR_CLASS)
toolbar2 = E.div(class_=TOOLBAR_CLASS)
toolbars.appendChild(toolbar1), toolbars.appendChild(toolbar2)
toolbar3 = E.div(class_=TOOLBAR_CLASS)
toolbars.appendChild(toolbar1), toolbars.appendChild(toolbar2), toolbars.appendChild(toolbar3)
acmap = all_editor_actions()
def add(toolbar, ac_name):
@ -457,12 +458,15 @@ def create_comments_editor(container):
else:
toolbar.appendChild(E.div(class_='sep'))
for ac_name in 'undo redo select-all remove-format | bold italic underline strikethrough | hr superscript subscript format-block'.split(' '):
for ac_name in 'undo redo select-all remove-format bold italic underline strikethrough'.split(' '):
add(toolbar1, ac_name)
for ac_name in 'ul ol indent outdent | justify-left justify-center justify-right justify-full | insert-link insert-image fg bg'.split(' '):
for ac_name in 'hr superscript subscript format-block ul ol indent outdent'.split(' '):
add(toolbar2, ac_name)
for ac_name in 'justify-left justify-center justify-right justify-full insert-link insert-image fg bg'.split(' '):
add(toolbar3, ac_name)
container.setAttribute('style', (container.getAttribute('style') or '') + ';display: flex; flex-direction: column; align-items: stretch')
container.appendChild(toolbars)
container.appendChild(iframe)