feat: top tab svgs

Fixes kubernetes-sigs#1968
starpit · Jul 14, 2019 · 0140cdc · 0140cdc
1 parent 8049e57
commit 0140cdc
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git a/packages/app/templates/index.html b/packages/app/templates/index.html
@@ -58,10 +58,10 @@
         </div>
         <div class='left-tab-stripe-bottom-buttons'>
           <div class='left-tab-stripe-button smaller-button' id='new-tab-button' data-balloon-disabled='Open a new tab' data-balloon-pos='right' data-balloon-length='fit'>
-            <i class='repl-prompt-right-element-icon deemphasize new-tab-button'>&#xFF0B;</i>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>
           </div>
           <div class='left-tab-stripe-button smaller-button' id='help-button'>
-            <i class='fas fa-question'></i>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 23a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 25zm1.14-7.75v2.5h-2.25V15H17a2.38 2.38 0 0 0 0-4.75h-1.5a2.38 2.38 0 0 0-2.38 2.37v.64h-2.23v-.64A4.63 4.63 0 0 1 15.52 8H17a4.63 4.63 0 0 1 .12 9.25z"></path></svg>
           </div>
         </div>
       </div>

diff --git a/packages/app/web/css/top-tab-stripe.css b/packages/app/web/css/top-tab-stripe.css
@@ -100,10 +100,12 @@ body[kui-theme-style="light"] .left-tab-stripe-buttons .left-tab-stripe-button i
 .left-tab-stripe-bottom-buttons i {
     filter: grayscale(0.5);
 }
-.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > i:hover {
-    color: var(--color-base06) !important;
+.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > svg:hover {
     cursor: pointer;
 }
+.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > svg:hover path {
+    fill: var(--color-base06) !important;
+}
 .left-tab-stripe-button-selected .left-tab-stripe-button-label {
     /* reduce the visibility of the tab label, for the visible tab */
     opacity: 0.75;
@@ -143,18 +145,21 @@ body.not-electron .repl-input {
     padding-right: 0.75rem;
 }
 
+.left-tab-stripe-button svg path {
+    fill: var(--color-base04);
+    transition: fill 150ms ease-in-out;
+}
+
 #help-button.left-tab-stripe-button {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgba(0,0,0,0.075);
 }
 #help-button:hover {
-    background-color: rgba(255,255,255,0.075);
     cursor: pointer;
 }
-#help-button.left-tab-stripe-button:hover i {
-    color: var(--color-brand-02) !important;
+#help-button.left-tab-stripe-button:hover svg path {
+    fill: var(--color-brand-02) !important;
 }
 
 .main {
@@ -211,11 +216,6 @@ body[kui-theme-style="light"] .left-tab-stripe-button-selected {
     filter: opacity(0.975) grayscale(0.5) brightness(0.975);
 }
 
-.left-tab-stripe-button > i {
-    font-style: normal;
-    -webkit-app-region: no-drag;
-}
-
 .left-tab-stripe-buttons .left-tab-stripe-button > i {
     display: none;
 }
@@ -252,7 +252,6 @@ body[kui-theme-style="light"] .left-tab-stripe-button-selected {
     flex: 1;
     justify-content: flex-start;
     -webkit-font-smoothing: antialiased;
-    border-right: 1px inset rgba(128,128,128,0.5);
 }
 
 .left-tab-stripe-bottom-buttons .left-tab-stripe-button {

diff --git a/packages/app/web/css/ui.css b/packages/app/web/css/ui.css
@@ -1917,7 +1917,7 @@ body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #theme-button,
 body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #help-button {
     display: none;
 }
-body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #new-tab-button i {
+body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #new-tab-button svg {
     font-size: 6vw;
 }
 body.subwindow sidecar .sidecar-header .sidecar-header-text.is-repl-like .entity-name {

diff --git a/plugins/plugin-core-support/src/lib/new-tab.ts b/plugins/plugin-core-support/src/lib/new-tab.ts
@@ -350,9 +350,9 @@ const oneTimeInit = (): void => {
   initialTabButton.onclick = () => qexec(`tab switch ${initialTabId}`)
 
   if (document.body.classList.contains('subwindow')) {
-    element('#new-tab-button > i').onclick = () => window.open(window.location.href, '_blank')
+    element('#new-tab-button > svg').onclick = () => window.open(window.location.href, '_blank')
   } else {
-    element('#new-tab-button > i').onclick = () => newTab()
+    element('#new-tab-button > svg').onclick = () => newTab()
   }
 
   addKeyboardListeners()