feat: remove per-torrent start/pause button from web client (#7292)

web/CMakeLists.txt

@@ -43,10 +43,6 @@ set(WEB_IMAGES
     assets/img/modern-tortoise.png
     assets/img/music.svg
     assets/img/package.svg
-    assets/img/pause-circle-active.svg
-    assets/img/pause-circle-idle.svg
-    assets/img/play-circle-active.svg
-    assets/img/play-circle-idle.svg
     assets/img/README.md
     assets/img/router.svg
     assets/img/type.svg)

web/assets/css/transmission-app.scss

@@ -26,7 +26,6 @@
   --dialog-logo-padding: calc(var(--dialog-padding) * 0.66);
   --dialog-padding: 20px;
   --logo-size: 64px;
-  --pauseresume-size: 20px;
   --popup-top: 82px; // TODO: ugly that this is hardcoded
   --toolbar-height: 50px;
 
@@ -65,10 +64,6 @@
   --image-chevron-up: url('../img/chevron-up.svg');
   --image-lock-fill: url('../img/lock-fill.svg');
   --image-magnet: url('../img/magnet.svg');
-  --image-pause-circle-active: url('../img/pause-circle-active.svg');
-  --image-pause-circle-idle: url('../img/pause-circle-idle.svg');
-  --image-play-circle-active: url('../img/play-circle-active.svg');
-  --image-play-circle-idle: url('../img/play-circle-idle.svg');
 
   --app-image-url: url('../img/box.svg');
   --audio-image-url: url('../img/music.svg');
@@ -622,7 +617,7 @@ a {
         grid-area: peers;
       }
 
-      .torrent-progress {
+      .torrent-progress-bar {
         display: flex;
         flex-direction: row;
         grid-area: progressbar;
@@ -664,32 +659,6 @@ a {
     background-repeat: no-repeat;
   }
 
-  .torrent-pauseresume-button {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: var(--pauseresume-size);
-    margin-left: calc(var(--pauseresume-size) / 2);
-    width: var(--pauseresume-size);
-
-    &[data-action='pause'] {
-      background-image: var(--image-pause-circle-idle);
-
-      &:active,
-      &:hover {
-        background-image: var(--image-pause-circle-active);
-      }
-    }
-
-    &[data-action='resume'] {
-      background-image: var(--image-play-circle-idle);
-
-      &:active,
-      &:hover {
-        background-image: var(--image-play-circle-active);
-      }
-    }
-  }
-
   .torrent-progress-bar {
     font-size: 14px;
     position: relative;

web/assets/img/README.md

@@ -7,10 +7,6 @@
 license: Apache-2.0 license
 
 - horizontal-rule.svg
-- pause-circle-active.svg
-- pause-circle-idle.svg
-- play-circle-active.svg
-- play-circle-idle.svg
 - router.svg
 
 ## [Feather Icons](https://github.com/feathericons/feather)

web/assets/img/pause-circle-active.svg

@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   version="1.1"
-   id="svg1"
-   width="60"
-   height="60"
-   viewBox="0 0 60 60"
-   sodipodi:docname="pause.png"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1" />
-  <g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g1">
-    <image
-       width="60"
-       height="60"
-       preserveAspectRatio="none"
-       style="image-rendering:optimizeQuality"
-       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABGdBTUEAALGPC/xhBQAAACBjSFJN&#10;AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIA&#10;AwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAA8oAMABAAA&#10;AAEAAAA8AAAAAJkCx0IAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHht&#10;bG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6&#10;UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5z&#10;IyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5z&#10;OmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczp0&#10;aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WURpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WERpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9y&#10;U3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90&#10;aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8&#10;L3g6eG1wbWV0YT4KQTteaQAABE5JREFUaAXlW09IFFEcfquZlFkdtjrkQmm1omBsURRIUnYOCmoL&#10;OkRERAQSRJIRIkhECxUSRNChWiJq65aHDtUeCpNy0S7ZoXIjFqXCba02JbPvm3VkWWdy58/uzux8&#10;8Plm35/f+33z3rx585vRJXKLZTDvA2unuRxp5TT/IB2b5iek78BBMAImQdugEZ5eAgfAv+CURv5G&#10;/WfgWbAGtCTc8Ooc+B7UKnCu+s9h8xBYBhYcnKIB8Ac4l+NGy6Po4zg4H8w7StDjCTAOGhWitT2v&#10;82Ywb1iHnl6BWh01u/5t+MAFMKfYD+sJ0Gzn9drjyr4+V4rPW0ho+gn6Bb92mSm6FMZuWFSsLJz3&#10;9MNmiHbByC2Li5VFMzUs+qKNxFIwR1r39D5iM7HySPOabgA1gQ3YUDZit5Sr96JsFZejIm/udhOZ&#10;6e/NbAW3F4FYWfz2uUSvQQU+rcgN7J6+hZb/7r3vFJFYebCOQZMi1iKXy7pcsVjSj9A0T1Y8c4CM&#10;0yB3VbrhdrtFW1ub8Hq9orQ0ZSqZTIpwOCy6urrE1BTP4WxUVFSI1tZW4fP5RFlZ6rF3YmJC9Pb2&#10;ikAgIHhsAKvQ9gAYTLexED8YbjE0qsFgEJqU4ff7VW13dnYqN0JuS0uLajsN/oZRVwKfa4k9YNb3&#10;LamFwp/6+nqF3FSW3rK6ujpVmxoKtqHuataXBfs1NFat6nJx660MvWUlJbKLynazzKVj+1iX1ngd&#10;N/FHkaOZ+ih4M5jzyAE7KzAa0X85BW8psCP56n4BOmqgYAbJnYJaCvY6RS10SoI9DhJcxRF2woIl&#10;j+lipwmupGDSKZC2MdxDOwVjHF3HCR52yvBC5zBHmAE7p2DQaYLfUfBrhwwvw1f9FPwCHHeAaL7T&#10;llZpfjHT4wDBT6iRI0w8SCXW+4uwlllOPaQhWfBdHBsKDdLY0NAQE0XoLYtGo4r2NGa+Qf1+tpHD&#10;spzW/HTAUMSsr69PVFdXC8ah4vG4GB0dFbFYTIRCISncOjk5yT5nIRKJCI/HI4VoE4mE1G5kZER0&#10;d3eLjo4OMT5ueIm5gE5fZna8CRlmhEStZuMbdM1EZOUpTfFcxR7zoMhwBXr4HZkiOMqcd1YbJb3+&#10;cNu8RFFpWua1IhJ8ME2X6uFSlPDM6D2rVmn3VFWhQsFO5Nl5an+B/1UKumZuS5llH5DBW1ZTZoEN&#10;fnOG7QUjWn3lCh4CrTJFs/XjlFah6fXL8YN70Gw7K3S9QLrzeo8ZxrWD6MvwU/31pUb1/DDkPljo&#10;EVTr/4xGPVlV5zXdDlpp9f4Of7hA5RQ7YD0Gqp3tfOUzUlOTU6VpxrlduwoWYrT5gfpJUH7Sw2H+&#10;sAFdPQLzMap8RrwOrgQLDv4zFoMIfK42W/xX2OQKrLhzQn5BwX34UZCPmT9BveK5NbwH7gZ5hzAN&#10;pt23FDyio1vBjWDtNFcg5X2d5PXP1zy8Jj+DfCFA9oADIE+W6fgHx/XhAwJBPHEAAAAASUVORK5C&#10;YII=&#10;"
-       id="image1" />
-  </g>
-</svg>

web/assets/img/play-circle-active.svg

@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   version="1.1"
-   id="svg1"
-   width="60"
-   height="60"
-   viewBox="0 0 60 60"
-   sodipodi:docname="play.png"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1" />
-  <g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g1">
-    <image
-       width="60"
-       height="60"
-       preserveAspectRatio="none"
-       style="image-rendering:optimizeQuality"
-       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABGdBTUEAALGPC/xhBQAAACBjSFJN&#10;AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIA&#10;AwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAA8oAMABAAA&#10;AAEAAAA8AAAAAJkCx0IAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHht&#10;bG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6&#10;UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5z&#10;IyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5z&#10;OmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczp0&#10;aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WURpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVs&#10;WERpbWVuc2lvbj42MDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9y&#10;U3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90&#10;aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8&#10;L3g6eG1wbWV0YT4KQTteaQAABRFJREFUaAXdWl9IJVUc/u21vBZuZag9uEKypeuDm1uGFYJYgiCi&#10;9FAm+BChEZVaEElK7JMhLhRIEGFCBRrqi2CgBZYPkQ/Gwiq4N8SiTFmwsFq1smz6vovnMl3v9c6f&#10;M/fO+IOPc2bmnO/8vjkzc37nnDkj3loB6C8BF45QiPTsEf5BevMIPyL9FogAV4E/gMBYDTx9G7gG&#10;/AsYNvEnyn8J9APnAV9aPrx6E1gH7ApMVf4rcD4L3Apk3PiIXgF2gVSOu73+A9p4EcgG0m4htPgy&#10;8CvgVojd+nzPnwDSZqVoaQmw66ju8h/DB34APbVnwP47oNt5p3z8sj/gleK3fCTUfIP24VezTtFZ&#10;IPvAp2KVcI7pz+kQfQYkH/lcrBLN1LXooQCJpWD2tOPHuyNgYlVP852+CNgyVmBFRRK0lF/vXKuK&#10;wyjIwT1oIuP9/dCq4MunQKwSX5dK9H0owNmKqhD09Dq0nBh7j50isaqzXoCmhHY/zvKzrgqelvR7&#10;aLpFKeasR9nryDCqcm01NTWyubkpu7u7Mjw8LHl5ea45XRDci7pt8fVvxwkut2jp1ampKcNs29vb&#10;RkdHhxEKhbTwO/BzAXX+Z+040ubMzMyMWW8sv7S0ZFRXV2trx4bPXGoqoWL1SLfywGurqqqSxcVF&#10;GR0dlcLCQq+bM/NzTvC0OsEXWuscN1kPx7oamZ2dHaO7u9vIyspKV49/rgQ/hozWRq0IVuKXl5eN&#10;2tpare0n0cNQOcxH+hEgY1ZRUSELCwsyPj4uRUVFXvpxG8gvUjAXyTNubW1tEolEpLe3V7KzTwyO&#10;3Ph6gYLL3DDorJubmyuDg4OysrIiDQ0NOqkVV1RwsTryS1paWipzc3MyPT0tJSXR0USXa+fYw54v&#10;dTr1tqWlRVZXV6Wvr88pRXy9O3wtmN7m5OTIwMCANDU1xTvv5PgsBRO+t/x8bl+5thDFMob2tc3P&#10;z8vk5KQOH2/6WvDW1pa0t7dLfX297O8zbnBtUcE3XNNoJjg4OJChoSEpKyuTsTGuSWizG4yjuWBX&#10;rY3SJdHs7Kz09PTI2tqaS6aE1SN8pCk447a+vi7Nzc3S2NjolVhq5PKt1ANag3c7k4e9vT2jv7/f&#10;CIfDWn1IoOlvnIvGHAyqta5UWhU8MTFhFBcXey1U8X8NndExmH/MLPIgXcZYua6uTlpbW2VjYyNd&#10;zc6bG3oJB+pOuE6T9TAn/V1dXemc9Ju1VJoF342Dv3SJRtCv5vfR9PDw0BgZGTEKCgrMDqQzz1+o&#10;jtkUzmhxorOzMyYYa1gG1rK08Lrw75VjanHiYReExwSVl5cblZWVx87rbMMi1y8ol3Qncc4iiR+E&#10;WPWBP8wlNfbyIWCVzO/lGDbfmVTt0YX3TpFgbjCktLtQgnfG772Xyr8vUio1FWC4GeRHexv+nzPp&#10;iWWT7RZ+hxK8VhsrGZwMe/4p4KpdlzmT0jY2gyvVI6jr+mt2hZrL8wcXxqC6nPGa54rZead5TqmC&#10;IPod+MldQi3GvQ+uonndQ07539CiMo6E7/RlwE9f79/gDz9QntrjYN8CnPaGrnrfwIfznio1kTNc&#10;exfIRG9z8/5VINmQikve2YOg/hTQ1Wsn8XC+/j7g6SYy+C3ZJZT6BOBy0UlOO7n2Mzj5BU4YOeF8&#10;Ro1x+PPAZ8Ae4EQg6zA0nACeBDhCaDNt41YCj+joo8BDAP8yIO4BOK4TfP+5r8V38ieA6+MEFxSv&#10;ARSu3f4DFAR8/czUm8MAAAAASUVORK5CYII=&#10;"
-       id="image1" />
-  </g>
-</svg>

web/src/torrent-row.js

@@ -217,14 +217,7 @@ export class TorrentRendererFull {
   render(controller, torrent, root) {
     const is_stopped = torrent.isStopped();
     root.classList.toggle('paused', is_stopped);
-    const {
+    const { labels, name, peer_details, progressbar, progress_details } = root;
-      button,
-      labels,
-      name,
-      peer_details,
-      progressbar,
-      progress_details,
-    } = root;
 
     // name
     setTextContent(name, torrent.getName());
@@ -243,10 +236,6 @@ export class TorrentRendererFull {
     TorrentRendererHelper.renderProgressbar(controller, torrent, progressbar);
     progressbar.classList.add('full');
 
-    // pause/resume button
-    button.alt = is_stopped ? 'Resume' : 'Pause';
-    button.dataset.action = is_stopped ? 'resume' : 'pause';
-
     // peer details
     TorrentRendererFull.renderPeerDetails(torrent, peer_details);
   }
@@ -261,7 +250,7 @@ export class TorrentRendererFull {
       ['name', 'torrent-name'],
       ['labels', 'torrent-labels'],
       ['progress_details', 'torrent-progress-details'],
-      ['progress', 'torrent-progress'],
+      ['progressbar', 'torrent-progress-bar full'],
       ['peer_details', 'torrent-peer-details'],
     ];
 
@@ -274,16 +263,6 @@ export class TorrentRendererFull {
 
     TorrentRendererHelper.updateIcon(root.icon, torrent);
 
-    const progressbar = document.createElement('div');
-    progressbar.className = 'torrent-progress-bar full';
-
-    const button = document.createElement('a');
-    button.className = 'torrent-pauseresume-button';
-
-    root.progress.append(progressbar, button);
-    root.progressbar = progressbar;
-    root.button = button;
-
     return root;
   }
 }

web/src/transmission.js

@@ -781,20 +781,6 @@ TODO: fix this when notifications get fixed
       this.setCurrentPopup(null);
     }
 
-    // handle the per-row pause/resume button
-    if (event_.target.classList.contains('torrent-pauseresume-button')) {
-      switch (event_.target.dataset.action) {
-        case 'pause':
-          this._stopTorrents([row.getTorrent()]);
-          break;
-        case 'resume':
-          this._startTorrents([row.getTorrent()]);
-          break;
-        default:
-          break;
-      }
-    }
-
     // Prevents click carrying to parent element
     // which deselects all on click
     event_.stopPropagation();