ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-26 00:01:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Enhancements for better wrapping of Status Area icons

Browse Source 
- New glyphs for `icon-multiline` and `icon-singleline`.
- Refinements to button labels and titles for clarity.
This commit is contained in:
Charles Hacskaylo 2024-09-18 10:55:17 -07:00
parent e3387d4576
commit b8a933e332
7 changed files with 1600 additions and 592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/_constants.scss
View File

@ -229,6 +229,8 @@ $glyph-icon-grid-on: '\ea38';
$glyph-icon-grid-off: '\ea39';
$glyph-icon-camera: '\ea3a';
$glyph-icon-folders-collapse: '\ea3b';
$glyph-icon-multiline: '\ea3c';
$glyph-icon-singleline: '\ea3d';
$glyph-icon-activity: '\eb00';
$glyph-icon-activity-mode: '\eb01';
$glyph-icon-autoflow-tabular: '\eb02';

703
src/styles/_glyphs.scss
View File

File diff suppressed because it is too large Load Diff

1475
src/styles/fonts/Open MCT Symbols 16px.json
View File

File diff suppressed because it is too large Load Diff

2
src/styles/fonts/Open-MCT-Symbols-16px.svg
View File

@ -123,6 +123,8 @@
<glyph unicode="&#xea39;" glyph-name="icon-grid-off" d="M256 344.6l128 157.6v9.8h8l104 128h-112v256h-128v-256h-256v-128h256v-167.4zM184 256h-184v-128h80l104 128zM768 423.4l-128-157.6v-9.8h-8l-104-128h112v-256h128v256h256v128h-256v167.4zM840 512h184v128h-80l-104-128zM832 896l-832-1024h192l832 1024h-192z" />
<glyph unicode="&#xea3a;" glyph-name="icon-camera" d="M896 640h-128l-128 256h-256l-128-256h-128c-70.601-0.227-127.773-57.399-128-127.978v-512.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v512.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM512 32c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0z" />
<glyph unicode="&#xea3b;" glyph-name="icon-folders-collapse" d="M896 576v-448c-0.215-70.606-57.394-127.785-127.979-128h-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v448.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM832 192v448c-0.215 70.606-57.394 127.785-127.979 128h-192.021l-101.5 82.74c-24.88 24.9-74.040 45.26-109.24 45.26h-237.26c-35.305-0.102-63.898-28.695-64-63.99v-640.010c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v0.021zM128 252v516l256-260z" />
<glyph unicode="&#xea3c;" glyph-name="icon-multiline" d="M832.4 767.4c22.8 0 38-11.8 45-19 7-7 19-22.4 19-45v-640c0-22.8-11.8-38-19-45-7-7-22.4-19-45-19h-640c-22.8 0-38 11.8-45 19-7 7-19 22.4-19 45v640c0 22.8 11.8 38 19 45 7 7 22.4 19 45 19h640zM832.4 895.4h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192v0zM256.4 575.4h512v-128h-512v128zM384.4 319.4h384v-128h-384v128z" />
<glyph unicode="&#xea3d;" glyph-name="icon-singleline" d="M832.4 895.4h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM896.4 447.4h-512v-128h512v-256c0-22.8-11.8-38-19-45-7-7-22.4-19-45-19h-640c-22.8 0-38 11.8-45 19-7 7-19 22.4-19 45v640c0 22.8 11.8 38 19 45 7 7 22.4 19 45 19h640c22.8 0 38-11.8 45-19 7-7 19-22.4 19-45v-256z" />
<glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 832h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
<glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 896c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
<glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 896c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 896h256v-1024h-256v1024zM832 896h-64v-704h256v512c0 105.6-86.4 192-192 192z" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/styles/fonts/Open-MCT-Symbols-16px.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Open-MCT-Symbols-16px.woff
View File

Binary file not shown.

10
src/ui/layout/AppLayout.vue
View File

@ -41,16 +41,16 @@
<StatusIndicators />
<button
class="l-shell__head__button c-icon-button"
:class="headCanWrap ? 'icon-list-view' : 'icon-3-dots'"
:aria-label="`Click to ${headCanWrap ? 'prevent wrapping' : 'wrap'} items`"
:title="`Click to ${headCanWrap ? 'prevent wrapping' : 'wrap'} items`"
:class="headCanWrap ? 'icon-multiline' : 'icon-singleline'"
:aria-label="`Display as ${headCanWrap ? 'multiple lines' : 'single line'}`"
:title="`Display as ${headCanWrap ? 'multiple lines' : 'single line'}`"
@click="toggleHeadWrapping"
></button>
<button
class="l-shell__head__collapse-button c-icon-button"
:class="headExpanded ? 'icon-items-collapse' : 'icon-items-expand'"
:aria-label="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
:title="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
:aria-label="`Show ${headExpanded ? 'icon only' : 'icon and name'}`"
:title="`Show ${headExpanded ? 'icon only' : 'icon and name'}`"
@click="toggleShellHead"
></button>
<NotificationBanner />