feature(css) keyspanel: add icons for: help, view, edit, delete, menu, console and contact

2026-01-23 02:35:49 +00:00 · 2013-12-24 14:49:02 +00:00 · 2013-12-24 14:49:02 +00:00 · 79f8491754
commit 79f8491754
parent 52c0fbf2f8
7 changed files with 148 additions and 8 deletions
--- a/css/style.css
+++ b/css/style.css
@ -105,6 +105,26 @@ body {
    transition: ease 0.1s;
 }

+.help-button:before {
+    font-family: 'Fontello';
+    content: '\e803  ';
+}
+
+.view-button:before {
+    font-family: 'Fontello';
+    content: '\e80a  ';
+}
+
+.edit-button:before {
+    font-family: 'Fontello';
+    content: '\e806  ';
+}
+
+.contact-button:before {
+    font-family: 'Fontello';
+    content: '\e809  ';
+}
+
 .config-button:before {
    font-family: 'Fontello';
    content: '\e804  ';
@ -115,6 +135,21 @@ body {
    content: '\e802  ';
 }

+.delete-button:before {
+    font-family: 'Fontello';
+    content: '\e802  ';
+}
+
+.menu-button:before {
+    font-family: 'Fontello';
+    content: '\e805  ';
+}
+
+.console-button:before {
+    font-family: 'Fontello';
+    content: '\e807  ';
+}
+
 .cmd-button:hover {
    border: 1.5px solid;
    transition: ease 0.5s;
--- a/font/fontello.eot
+++ b/font/fontello.eot
--- a/font/fontello.json
+++ b/font/fontello.json
@ -6,12 +6,110 @@
  "units_per_em": 1000,
  "ascent": 850,
  "glyphs": [
+    {
+      "uid": "60617c8adc1e7eb3c444a5491dd13f57",
+      "css": "attention-circled-1",
+      "code": 59395,
+      "src": "custom_icons",
+      "selected": false,
+      "svg": {
+        "path": "M429 71Q545 71 644 129T800 285T857 500T800 715T644 871T429 929T213 871T58 715T0 500T58 285T213 129T429 71ZM500 767V661Q500 653 495 648T483 643H376Q368 643 363 648T357 661V767Q357 775 363 780T376 786H483Q490 786 495 780T500 767ZM499 575L509 229Q509 222 503 219Q498 214 490 214H367Q359 214 354 219Q348 222 348 229L358 575Q358 581 363 585T377 589H480Q488 589 493 585T499 575Z",
+        "width": 857.1
+      },
+      "search": [
+        "attention-circled"
+      ]
+    },
+    {
+      "uid": "9347a40928618e76958fa67e5333f1c5",
+      "css": "doc-text-1",
+      "code": 59397,
+      "src": "custom_icons",
+      "selected": false,
+      "svg": {
+        "path": "M212 542L212 452L492 452L492 542L212 542ZM600 50Q642 50 671 79T700 150L700 850Q700 890 671 920T600 950L100 950Q60 950 30 920T0 850L0 150Q0 108 30 79T100 50L600 50ZM600 850L600 150L100 150L100 850L600 850ZM490 258L490 346L210 346L210 258L490 258ZM490 650L490 738L210 738L210 650L490 650Z",
+        "width": 700
+      },
+      "search": [
+        "doc-text"
+      ]
+    },
+    {
+      "uid": "6405321f27abab4a505476c917d8c748",
+      "css": "folder-1",
+      "code": 59398,
+      "src": "custom_icons",
+      "selected": false,
+      "svg": {
+        "path": "M954 350Q986 350 994 362T1000 398L958 850Q956 874 946 887T904 900L98 900Q46 900 42 850L0 398Q-2 374 6 362T46 350L954 350ZM920 240L930 280L84 280L98 148Q102 128 118 114T154 100L318 100Q370 100 404 134L434 164Q466 200 520 200L860 200Q880 200 898 212T920 240Z",
+        "width": 1001
+      },
+      "search": [
+        "folder"
+      ]
+    },
+    {
+      "uid": "2ba2063e74ee7b74f6c46a949d37a130",
+      "css": "cog-2",
+      "code": 59399,
+      "src": "custom_icons",
+      "selected": false,
+      "svg": {
+        "path": "M0 498Q0 460 7 415Q57 419 102 396T172 328Q197 283 195 233T165 142Q229 86 315 56Q338 97 379 122T469 146T558 122T622 56Q707 86 772 142Q751 181 751 227T774 313Q798 354 839 377T926 400Q937 449 937 498Q937 530 930 572Q885 573 846 597T783 660Q758 704 760 752T786 841Q720 901 641 934Q618 892 577 867T487 842Q434 842 391 870T327 944Q245 918 174 862Q202 821 204 771T181 676Q154 630 107 606T9 589Q0 548 0 498ZM293 498Q293 571 344 622T469 673T593 622T644 498T593 374T469 322T344 374T293 498Z",
+        "width": 937.5
+      },
+      "search": [
+        "cog-1"
+      ]
+    },
+    {
+      "uid": "17ebadd1e3f274ff0205601eef7b9cc4",
+      "css": "help-circled",
+      "code": 59395,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c5fd349cbd3d23e4ade333789c29c729",
+      "css": "eye",
+      "code": 59402,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "41087bc74d4b20b55059c60a33bf4008",
+      "css": "edit",
+      "code": 59398,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "85528017f1e6053b2253785c31047f44",
+      "css": "comment",
+      "code": 59401,
+      "src": "fontawesome"
+    },
    {
      "uid": "b035c28eba2b35c6ffe92aee8b0df507",
      "css": "attention-circled",
      "code": 59392,
      "src": "fontawesome"
    },
+    {
+      "uid": "f48ae54adfb27d8ada53d0fd9e34ee10",
+      "css": "trash",
+      "code": 59400,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "559647a6f430b3aeadbecd67194451dd",
+      "css": "menu",
+      "code": 59397,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "fa10777b2d88cc64cd6e4f26ef0e5264",
+      "css": "terminal",
+      "code": 59399,
+      "src": "fontawesome"
+    },
    {
      "uid": "1189604bf305b6b03a74685ce60e6632",
      "css": "doc-text",
--- a/font/fontello.svg
+++ b/font/fontello.svg
@ -6,10 +6,17 @@
 <font id="fontello" horiz-adv-x="1000" >
 <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="help-circled" unicode="&#xe803;" d="m500 82v107q0 8-5 13t-13 5h-107q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h107q8 0 13 5t5 13z m143 375q0 49-31 91t-77 65t-95 23q-136 0-207-119q-9-14 4-24l74-55q4-4 10-4q9 0 14 7q30 38 48 51q19 14 48 14q27 0 48-15t21-33q0-21-11-34t-38-25q-35-16-65-48t-29-70v-20q0-8 5-13t13-5h107q8 0 13 5t5 13q0 10 12 27t30 28q18 10 28 16t25 19t25 27t16 34t7 45z m214-107q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="cog-1" unicode="&#xe804;" d="m0 352q0 38 7 83q50-4 95 19t70 68q25 45 23 95t-30 91q64 56 150 86q23-41 64-66t90-24t89 24t64 66q85-30 150-86q-21-39-21-85t23-86q24-41 65-64t87-23q11-49 11-98q0-32-7-74q-45-1-84-25t-63-63q-25-44-23-92t26-89q-66-60-145-93q-23 42-64 67t-90 25q-53 0-96-28t-64-74q-82 26-153 82q28 41 30 91t-23 95q-27 46-74 70t-98 17q-9 41-9 91z m293 0q0-73 51-124t125-51t124 51t51 124t-51 124t-124 52t-125-52t-51-124z" horiz-adv-x="937.5" />
+<glyph glyph-name="edit" unicode="&#xe806;" d="m496 189l64 65l-85 85l-64-65v-31h53v-54h32z m245 402q-9 9-18 0l-196-196q-9-9 0-18t18 0l196 196q9 9 0 18z m45-331v-106q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q35 0 65-14q9-4 10-13q2-10-5-16l-27-28q-8-8-18-4q-13 3-25 3h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v70q0 7 5 12l36 36q8 8 20 4t11-16z m-54 411l161-160l-375-375h-161v160z m248-73l-51-52l-161 161l51 51q16 16 38 16t38-16l85-84q16-16 16-38t-16-38z" horiz-adv-x="1000" />
+<glyph glyph-name="comment" unicode="&#xe809;" d="m1000 350q0-97-67-179t-182-130t-251-48q-39 0-81 4q-110-97-257-135q-27-8-63-12q-10-1-17 5t-10 16v1q-2 2 0 6t1 6t2 5l4 5t4 5t4 5q4 5 17 19t20 22t17 22t18 28t15 33t15 42q-88 50-138 123t-51 157q0 73 40 139t106 114t160 76t194 28q136 0 251-48t182-130t67-179z" horiz-adv-x="1000" />
 <glyph glyph-name="attention-circled" unicode="&#xe800;" d="m429 779q116 0 215-58t156-156t57-215t-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58z m71-696v106q0 8-5 13t-12 5h-107q-8 0-13-5t-6-13v-106q0-8 6-13t13-6h107q7 0 12 6t5 13z m-1 192l10 346q0 7-6 10q-5 5-13 5h-123q-8 0-13-5q-6-3-6-10l10-346q0-6 5-10t14-4h103q8 0 13 4t6 10z" horiz-adv-x="857.1" />
+<glyph glyph-name="eye" unicode="&#xe80a;" d="m929 314q-85 132-213 197q34-58 34-125q0-104-73-177t-177-73t-177 73t-73 177q0 67 34 125q-128-65-213-197q75-114 187-182t242-68t242 68t187 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-12 8-19t19-8t19 8t8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38q-78-129-210-206t-279-77t-279 77t-210 206q-11 19-11 38t11 39q78 128 210 205t279 78t279-78t210-205q11-20 11-39z" horiz-adv-x="1000" />
+<glyph glyph-name="menu" unicode="&#xe805;" d="m857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
+<glyph glyph-name="terminal" unicode="&#xe807;" d="m326 301l-260-260q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219l-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l260-260q6-5 6-13t-6-13z m603-255v-35q0-8-5-13t-13-5h-536q-8 0-13 5t-5 13v35q0 8 5 13t13 5h536q8 0 13-5t5-13z" horiz-adv-x="928.6" />
 <glyph glyph-name="doc-text" unicode="&#xe801;" d="m212 308l0 90l280 0l0-90l-280 0z m388 492q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-500 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l500 0z m0-800l0 700l-500 0l0-700l500 0z m-110 592l0-88l-280 0l0 88l280 0z m0-392l0-88l-280 0l0 88l280 0z" horiz-adv-x="700" />
 <glyph glyph-name="folder" unicode="&#xe802;" d="m954 500q32 0 40-12t6-36l-42-452q-2-24-12-37t-42-13l-806 0q-52 0-56 50l-42 452q-2 24 6 36t40 12l908 0z m-34 110l10-40l-846 0l14 132q4 20 20 34t36 14l164 0q52 0 86-34l30-30q32-36 86-36l340 0q20 0 38-12t22-28z" horiz-adv-x="1001" />
-<glyph glyph-name="cog-1" unicode="&#xe804;" d="m0 352q0 38 7 83q50-4 95 19t70 68q25 45 23 95t-30 91q64 56 150 86q23-41 64-66t90-24t89 24t64 66q85-30 150-86q-21-39-21-85t23-86q24-41 65-64t87-23q11-49 11-98q0-32-7-74q-45-1-84-25t-63-63q-25-44-23-92t26-89q-66-60-145-93q-23 42-64 67t-90 25q-53 0-96-28t-64-74q-82 26-153 82q28 41 30 91t-23 95q-27 46-74 70t-98 17q-9 41-9 91z m293 0q0-73 51-124t125-51t124 51t51 124t-51 124t-124 52t-125-52t-51-124z" horiz-adv-x="937.5" />
+<glyph glyph-name="trash" unicode="&#xe808;" d="m286 439v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m143 0v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m142 0v-321q0-8-5-13t-12-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q7 0 12-5t5-13z m72-404v529h-500v-529q0-12 4-22t8-15t6-5h464q2 0 6 5t8 15t4 22z m-375 601h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q22 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
 </font>
 </defs>
 </svg>
--- a/font/fontello.ttf
+++ b/font/fontello.ttf
--- a/font/fontello.woff
+++ b/font/fontello.woff
--- a/html/index.html
+++ b/html/index.html
@ -16,18 +16,18 @@
    
    <div class=fm>{{ fm }}</div>
    <div class="keyspanel">
-        <button id=f1 class=cmd-button>F1 - help</button>
+        <button id=f1 class="cmd-button help-button">F1 - help</button>
        <button id=f2 class=cmd-button>F2 - rename</button>
-        <button id=f3 class=cmd-button>F3 - view</button>
-        <button id=f4 class=cmd-button>F4 - edit</button>
+        <button id=f3 class="cmd-button view-button">F3 - view</button>
+        <button id=f4 class="cmd-button edit-button">F4 - edit</button>
        <button id=f5 class=cmd-button>F5 - copy</button>
        <button id=f6 class=cmd-button>F6 - move</button>
        <button id=f7 class="cmd-button directory-button">F7 - make dir</button>
-        <button id=f8 class=cmd-button>F8 - delete</button>
-        <button id=f9 class=cmd-button>F9 - menu</button>
+        <button id=f8 class="cmd-button delete-button">F8 - delete</button>
+        <button id=f9 class="cmd-button menu-button">F9 - menu</button>
        <button id=f10 class="cmd-button config-button">F10 - config</button>
-        <button id=~ class=cmd-button>~ - console</button>
-        <button id=contact class=cmd-button>contact</button>
+        <button id=~ class="cmd-button console-button">~ - console</button>
+        <button id=contact class="cmd-button contact-button">contact</button>
    </div>
    <script>
        !(function() {