feat: update & move turtle to own button on status bar of web app (#6940)

web/CMakeLists.txt

@@ -39,13 +39,12 @@ set(WEB_IMAGES
     assets/img/lock-fill.svg
     assets/img/logo.png
     assets/img/magnet.svg
-    assets/img/modern-tortoise-blue.png
-    assets/img/modern-tortoise.png
     assets/img/music.svg
     assets/img/package.svg
     assets/img/README.md
     assets/img/router.svg
-    assets/img/type.svg)
+    assets/img/type.svg
+    assets/img/turtle.svg)
 
 add_custom_command(
     OUTPUT

web/assets/css/transmission-app.scss

@@ -54,13 +54,12 @@
 
   /* ICONS -- see assets/img/README.md for sources and license details */
   /* Are you a designer? New icon PRs welcomed! */
-  --image-alt-speed-disabled: url('../img/modern-tortoise.png');
-  --image-alt-speed-enabled: url('../img/modern-tortoise-blue.png');
   --image-baseline: url('../img/horizontal-rule.svg');
   --image-chevron-dn: url('../img/chevron-down.svg');
   --image-chevron-up: url('../img/chevron-up.svg');
   --image-lock-fill: url('../img/lock-fill.svg');
   --image-magnet: url('../img/magnet.svg');
+  --image-turtle: url('../img/turtle.svg');
 
   --app-image-url: url('../img/box.svg');
   --audio-image-url: url('../img/music.svg');
@@ -360,12 +359,6 @@ a {
     height: 36px;
     width: 36px;
   }
-
-  &.alt-speed-enabled {
-    background-image: var(--image-alt-speed-enabled);
-    background-position: bottom left;
-    background-size: 20px;
-  }
 }
 
 /// FILTERBAR
@@ -424,6 +417,36 @@ a {
     }
   }
 
+  button {
+    background-color: transparent;
+    border: 1px solid var(--color-border-default);
+    border-radius: 4px;
+    cursor: pointer;
+    height: 22px;
+    user-select: none;
+    -webkit-user-select: none;
+    width: 36px;
+  }
+
+  #turtle {
+    &.alt-speed-enabled {
+      background-color: var(--color-bg-selected);
+
+      &::before {
+        filter: hue-rotate(120deg) saturate(180%);
+      }
+    }
+
+    &::before {
+      content: '';
+      background: var(--image-turtle) no-repeat center;
+      left: calc(20% - 5px);
+      filter: grayscale(100%) brightness(50%);
+      padding: 9px;
+      position: relative;
+    }
+  }
+
   @include viewport-small {
     .speed-container,
     span:not(.flexible-space) {
@@ -788,12 +811,11 @@ a {
     }
   }
 
-  .alt-speed-section-label {
-    background: transparent var(--image-alt-speed-enabled) no-repeat;
-    background-position: left;
-    background-position-y: 4px;
-    background-size: 20px;
-    padding-left: 22px;
+  .alt-speed-section-label::before {
+    content: '';
+    background: var(--image-turtle) no-repeat left / 20px;
+    filter: hue-rotate(120deg) saturate(180%);
+    padding: 0 11px;
   }
 
   :disabled,
@@ -1476,27 +1498,17 @@ a {
 
     .alt-speed {
       display: grid;
-      grid-column-gap: 5px;
-      grid-row-gap: 5px;
+      gap: 4px;
       grid-template-areas:
         'check  text'
         'turtle parentheses';
-      grid-template-columns: 22px 1fr;
-      margin-bottom: 4px;
     }
 
     :nth-child(1) {
       grid-area: check;
 
-      &:checked ~ #alt-speed-image {
-        background-image: var(--image-alt-speed-enabled);
-        background-position: left;
-        background-size: 22px;
-      }
-
       &:not(:checked) ~ #alt-speed-image {
-        background-image: var(--image-alt-speed-disabled);
-        background-size: 22px;
+        filter: grayscale(100%) brightness(50%);
       }
     }
 
@@ -1505,9 +1517,10 @@ a {
     }
 
     #alt-speed-image {
-      background-position: center;
-      background-repeat: no-repeat;
+      background: var(--image-turtle) no-repeat;
+      filter: hue-rotate(120deg) saturate(180%);
       grid-area: turtle;
+      height: 18px;
     }
 
     :nth-child(4) {

web/assets/img/README.md

@@ -9,6 +9,12 @@ license: Apache-2.0 license
 - horizontal-rule.svg
 - router.svg
 
+## [Twemoji](https://github.com/twitter/twemoji/blob/master/assets/svg/1f422.svg) (derived from)
+
+license: CC-BY 4.0
+
+- turtle.svg
+
 ## [Feather Icons](https://github.com/feathericons/feather)
 
 license: MIT
@@ -47,5 +53,3 @@ license: MIT
 - toolbar-info.png
 - toolbar-pause.png
 - toolbar-start.png
-- modern-tortoise.png
-- modern-tortoise-blue.png

web/assets/img/turtle.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+<g transform="scale(-1, 1) translate(-36, -6)">
+<path fill="#99C377" d="M9.842 19.922c0 9.842 6.575 9.673 5.158 10.078-7 2-8.803-7.618-9.464-7.618-2.378 0-5.536-.423-5.536-2.46C0 17.883 2.46 15 6.151 15c2.379 0 3.691 2.883 3.691 4.922zM36 28.638c0 1.104-3.518-.741-5 0-2 1-2-.896-2-2s1.343-1 3-1 4 1.895 4 3z"/>
+<path fill="#99C377" d="M16.715 33.143c0 2.761-1.279 2.857-2.857 2.857S11 35.903 11 33.143c0-.489.085-1.029.234-1.587.69-2.59 2.754-5.556 4.052-5.556 1.578 0 1.429 4.382 1.429 7.143zm8.571 0c0 2.761 1.278 2.857 2.856 2.857C29.721 36 31 35.903 31 33.143c0-.489-.085-1.029-.234-1.587-.691-2.59-2.754-5.556-4.052-5.556-1.578 0-1.428 4.382-1.428 7.143z"/>
+<path fill="#5EA24D" d="M32 27c0 4-5.149 4-11.5 4S9 31 9 27c0-6.627 5.149-12 11.5-12S32 20.373 32 27z"/>
+<circle fill="#000" cx="5" cy="18" r="1"/>
+</g>
+</svg>

web/public_html/index.html

@@ -100,6 +100,7 @@
           <span class="flexible-space"></span>
           <div id="speed-up"></div>
         </div>
+        <button id="turtle"></button>
       </header>
 
       <main id="mainwin-workarea">

web/src/transmission.js

@@ -266,6 +266,14 @@ export class Transmission extends EventTarget {
       this.refilterAllSoon();
     }
 
+    e = document.querySelector('#turtle');
+    e.addEventListener('click', (event_) => {
+      this.remote.savePrefs({
+        [RPC._TurtleState]:
+          !event_.target.classList.contains('alt-speed-enabled'),
+      });
+    });
+
     document.addEventListener('keydown', this._keyDown.bind(this));
     document.addEventListener('keyup', this._keyUp.bind(this));
     e = document.querySelector('#torrent-container');
@@ -1029,7 +1037,7 @@ TODO: fix this when notifications get fixed
       version,
     };
 
-    const element = document.querySelector('#toolbar-overflow');
+    const element = document.querySelector('#turtle');
     element.classList.toggle('alt-speed-enabled', o[RPC._TurtleState]);
   }