mirror of
https://github.com/transmission/transmission.git
synced 2025-12-24 20:35:36 +00:00
Refresh web interface across desktop and mobile (#3985)
* Add macOS section to Web-Interface docs - Add minimal steps to enable web interface on macOS - Clean up README.md with some markdown linting. * Updating and modernizing web interface, colors, icons In general: - increase spacing and decrease font sizes in most inspectors (so far) - replace icons with emoji. may not be the way to go in the end * update toolbar icon sizes to adjust for differences * Switch from icons to buttons, other minor color changes 1. Add 'warn' class to dangerous actions 2. Add 'table-row' helper to overflow menu 3. Use text instead of icons for this new tab style * Update icons using feathericons.com * Rename files, replace some SVG and optimize PNG * Remove more unused variables * Update index.html to reflect new icons * More minor svg changes; delete old images * Updated build output * Remove icons, add new feather svg icons Build is now sub-200 KB
This commit is contained in:
Derek Reiff
GitHub
@@ -16,6 +16,7 @@
|
||||
<title>Transmission Web Interface</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div class="mainwin">
|
||||
<header class="mainwin-toolbar" id="mainwin-toolbar">
|
||||
<button
|
||||
@@ -25,7 +26,26 @@
|
||||
data-action="open-torrent"
|
||||
id="toolbar-open"
|
||||
tabindex="0"
|
||||
></button>
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-folder-plus toolbar-icon"
|
||||
>
|
||||
<path
|
||||
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
|
||||
></path>
|
||||
<line x1="12" y1="11" x2="12" y2="17"></line>
|
||||
<line x1="9" y1="14" x2="15" y2="14"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-keyshortcuts="Alt+Delete"
|
||||
aria-label="Remove selected torrents"
|
||||
@@ -33,7 +53,27 @@
|
||||
data-action="remove-selected-torrents"
|
||||
id="toolbar-remove"
|
||||
tabindex="0"
|
||||
></button>
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-trash-2 toolbar-icon"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path
|
||||
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
|
||||
></path>
|
||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="toolbar-separator"></div>
|
||||
<button
|
||||
aria-keyshortcuts="Alt+R"
|
||||
@@ -42,7 +82,22 @@
|
||||
data-action="resume-selected-torrents"
|
||||
id="toolbar-start"
|
||||
tabindex="0"
|
||||
></button>
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-play"
|
||||
>
|
||||
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-keyshortcuts="Alt+P"
|
||||
aria-label="Pause selected torrents"
|
||||
@@ -50,7 +105,23 @@
|
||||
data-action="pause-selected-torrents"
|
||||
id="toolbar-pause"
|
||||
tabindex="0"
|
||||
></button>
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-pause"
|
||||
>
|
||||
<rect x="6" y="4" width="4" height="16"></rect>
|
||||
<rect x="14" y="4" width="4" height="16"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="toolbar-separator"></div>
|
||||
<button
|
||||
aria-keyshortcuts="Alt+I"
|
||||
@@ -59,7 +130,34 @@
|
||||
data-action="show-inspector"
|
||||
id="toolbar-inspector"
|
||||
tabindex="0"
|
||||
></button>
|
||||
>
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xl="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
viewBox="-1 -1 26 26"
|
||||
width="26"
|
||||
height="26"
|
||||
>
|
||||
<g fill-opacity="1" stroke="currentColor" fill="none">
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="12.0000191748228"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
class="inspector-icon"
|
||||
d="M 11.88208 4.883789 C 12.326418 4.883789 12.702391 5.039305 13.01001 5.350342 C 13.317628 5.6613785 13.471436 6.035642 13.471436 6.4731445 C 13.471436 6.910647 13.31592 7.283202 13.004883 7.59082 C 12.693846 7.898439 12.319582 8.052246 11.88208 8.052246 C 11.444578 8.052246 11.072023 7.898439 10.764404 7.59082 C 10.456786 7.283202 10.302979 6.910647 10.302979 6.4731445 C 10.302979 6.035642 10.456786 5.6613785 10.764404 5.350342 C 11.072023 5.039305 11.444578 4.883789 11.88208 4.883789 Z M 13.317627 9.528809 L 13.317627 17.126953 C 13.317627 17.803714 13.39624 18.236083 13.553467 18.424072 C 13.710694 18.612061 14.018308 18.719726 14.476318 18.74707 L 14.476318 19.11621 L 9.298096 19.11621 L 9.298096 18.74707 C 9.721926 18.733398 10.036376 18.610353 10.241455 18.37793 C 10.378175 18.220702 10.446533 17.803714 10.446533 17.126953 L 10.446533 11.52832 C 10.446533 10.851559 10.367921 10.41919 10.210693 10.231201 C 10.053466 10.043212 9.74927 9.935547 9.298096 9.908203 L 9.298096 9.528809 Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="toolbar-separator"></div>
|
||||
<button
|
||||
aria-keyshortcuts="Alt+M"
|
||||
@@ -68,7 +166,24 @@
|
||||
data-action="show-overflow-menu"
|
||||
id="toolbar-overflow"
|
||||
tabindex="0"
|
||||
></button>
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-menu"
|
||||
>
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<header class="mainwin-filterbar" id="statusbar">
|
||||
|
||||
2
web/public_html/transmission-app.js
generated
2
web/public_html/transmission-app.js
generated
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user