From d2cd6ea00b174373ed8caabaa17eb7154da1e8a7 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Sun, 20 Aug 2017 18:08:19 -0400 Subject: [PATCH 1/8] Popup mockup --- popup.html | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/popup.html b/popup.html index 8fae9043ef..b0a097b0b3 100644 --- a/popup.html +++ b/popup.html @@ -16,15 +16,18 @@
- +
- - - - - + + + + + + + + @@ -82,9 +85,13 @@
-
-
- +
+ +
From 6277d34a2a586bcab906539814c4b5f5f95aefee Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Sun, 20 Aug 2017 18:12:52 -0400 Subject: [PATCH 2/8] Popup Mockup --- popup/popup.css | 116 +++++++++++++++++++++++++++++++++++++----------- popup/popup.js | 6 ++- 2 files changed, 96 insertions(+), 26 deletions(-) diff --git a/popup/popup.css b/popup/popup.css index 758bd584a2..b946e0c4f4 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -34,9 +34,16 @@ input[type=checkbox] { } .style-name { - cursor: default; + height: 100%; + line-height: 26px; + cursor: pointer; font-weight: bold; - display: block; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + white-space: nowrap; + padding-right: 5px; } a { @@ -78,15 +85,21 @@ body.blocked > DIV { overflow-y: auto; } -#installed.disabled .style-name { +#installed .disabled .style-name, #installed.disabled .style-name { text-decoration: line-through; } #installed .actions { + display: flex; cursor: default; } #installed .actions a { + display: inline-flex; + justify-content: center; + align-items: center; + height: 18px; + width: 18px; cursor: pointer; text-decoration: none; } @@ -96,37 +109,21 @@ body.blocked > DIV { .entry { display: flex; align-items: center; - padding: 5px 0.75em; + padding: 0 0.75em; + height: 26px; } .entry:nth-child(even) { background-color: rgba(0, 0, 0, 0.05); } -.entry .style-edit-link { - margin-right: 2px; -} - -.entry .style-edit-link, -.entry .delete { - display: inline-block; - padding: 0 1px 0; -} - .entry .main-controls { display: flex; - width: calc(100% - 20px); + width: 100%; + height: 100%; align-items: center; } -.entry .main-controls label { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-right: 5px; -} - .not-applied .checker, .not-applied .style-name, .not-applied .actions > * { @@ -204,6 +201,70 @@ body.blocked > DIV { fill: #666; } +.svg-icon.on, .svg-icon.off { + width: 18px; + height: 18px; +} + +.svg-icon.on { + fill: hsl(0, 0%, 28%); +} + +.svg-icon.off { + fill: hsl(0, 100%, 45%); +} + +#installed.disabled .svg-icon.on { + fill: hsl(45, 100%, 38%); +} + + +#disableAll-label { + cursor: pointer; + display:flex; +} + +#disableAll-label:hover .svg-icon.all-off, #disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label:hover .svg-icon.all-off, #installed.disabled a:hover .svg-icon.on { + fill: hsl(0, 0%, 0%); +} + +#disableAll-label .svg-icon.all-off { + height: 18px; + width: 18px; + fill: hsl(0, 0%, 28%); +} + +#disable-all-wrapper input[type="checkbox"]:checked + .main-controls .svg-icon.all-off { + width: 18px; + fill: hsl(0, 100%, 45%); +} + +#disableAll-label::before { + content: ""; + border-radius: 3px; + display: inline-flex; + width: 16px; + height: 16px; + background: #000 url(/images/icon/16.png)no-repeat center; + border: #000 solid; + border-width: 1px 0; + box-shadow: 0 0 3px #000, 0 0 3px hsla(0, 0%, 0%, .5); + margin: 0 4px 0 0; + transition: background .3s, border .3s, box-shadow .3s; +} + +#disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label::before { + background: #000 url(/images/icon/16x.png)no-repeat center; +} + +#installed .actions a.delete .svg-icon { + margin-top: -1px; +} + +#installed .actions a.enable, #installed .actions a.disable { + margin: 0 2px; +} + a:hover .svg-icon { fill: #000; } @@ -230,11 +291,16 @@ body.blocked .actions > .left-gutter { /* Never shown, but can be enabled with a style */ -.enable, -.disable { +#installed .enabled .actions a.enable, +#installed .disabled .actions a.disable, +#installed .left-gutter, +#disable-all-wrapper .left-gutter input[type="checkbox"] { display: none; } +.actions .left-gutter { + width: 0; +} /* 'New style' links */ #write-style { diff --git a/popup/popup.js b/popup/popup.js index 7e1e90a920..86fdb2e771 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -254,7 +254,7 @@ function createStyleElement({ const styleName = $('.style-name', entry); Object.assign(styleName, { htmlFor: ENTRY_ID_PREFIX_RAW + style.id, - onclick: handleEvent.name, + /* onclick: handleEvent.name, */ }); styleName.checkbox = checkbox; styleName.appendChild(document.createTextNode(style.name)); @@ -361,6 +361,8 @@ Object.assign(handleEvent, { event.button === 2)) { return; } + + /* // open an editor on middleclick if (event.target.matches('.entry, .style-name, .style-edit-link')) { this.onmouseup = () => $('.style-edit-link', this).click(); @@ -368,6 +370,8 @@ Object.assign(handleEvent, { event.preventDefault(); return; } + */ + // prevent the popup being opened in a background tab // when an irrelevant link was accidentally clicked if (event.target.closest('a')) { From 1c0fe402a76b8db10e303493eb2b72e25727dced Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Mon, 21 Aug 2017 00:40:12 -0400 Subject: [PATCH 3/8] Convert the rest of the buttons to icons --- popup.html | 62 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 40 insertions(+), 22 deletions(-) diff --git a/popup.html b/popup.html index b0a097b0b3..001259562c 100644 --- a/popup.html +++ b/popup.html @@ -82,36 +82,54 @@
-
-
- -
- +
+
+
+ +
+ +
+
+ + + +
-
-
- -
- -
From 700a122aebb16e953bb993dffa878c08f9a46305 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Mon, 21 Aug 2017 00:41:24 -0400 Subject: [PATCH 4/8] Convert the rest of the buttons to icons --- popup/popup.css | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/popup/popup.css b/popup/popup.css index b946e0c4f4..6ae609863f 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -21,10 +21,6 @@ input[type=checkbox] { outline: none; } -#disable-all-wrapper { - padding: 0.3em 0 0.6em; -} - #no-styles { font-style: italic; } @@ -206,6 +202,12 @@ body.blocked > DIV { height: 18px; } +.svg-icon.find-styles, .svg-icon.open-manager, .svg-icon.open-options, .svg-icon.open-shortcuts { + width: 18px; + height: 18px; + fill: hsl(0, 0%, 28%); +} + .svg-icon.on { fill: hsl(0, 0%, 28%); } @@ -221,7 +223,6 @@ body.blocked > DIV { #disableAll-label { cursor: pointer; - display:flex; } #disableAll-label:hover .svg-icon.all-off, #disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label:hover .svg-icon.all-off, #installed.disabled a:hover .svg-icon.on { @@ -270,11 +271,26 @@ a:hover .svg-icon { } body > .actions { - margin-top: 0.5em; + display: flex; + flex-direction: column; + margin-top: 0.75em; +} + +body > .actions > .actions-inner { + display: flex; + flex-direction: row; +} + +body > .actions > .actions-inner > div[id] { + margin-right: 14px; } -.actions > div:not(:last-child):not(#disable-all-wrapper), -.actions > .main-controls > div:not(:last-child) { +body > .actions > .actions-inner #disableAll-label, body > .actions > .actions-inner a{ + display: inline-flex; + cursor: pointer; +} + +.actions > div { margin-bottom: 0.75em; } @@ -376,22 +392,6 @@ body.blocked .actions > .left-gutter { text-decoration-skip: ink; } -/* action buttons */ - -#popup-options { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 1.2em 1px; -} - -#popup-options button { - width: 32%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - .firefox #popup-options button { width: 49%; } From 0cfecc19af4ef07b2918e9084658276d623e3410 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Tue, 22 Aug 2017 22:14:09 -0400 Subject: [PATCH 5/8] Better icons --- popup.html | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/popup.html b/popup.html index 001259562c..520e3e0709 100644 --- a/popup.html +++ b/popup.html @@ -16,21 +16,21 @@
- +
- - + + - - + + - - + +
@@ -88,8 +88,11 @@
@@ -105,29 +108,33 @@
- + + + + +
From bef23ae76761eb0327a7b2ac1c25a43608eec98c Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Tue, 22 Aug 2017 22:14:53 -0400 Subject: [PATCH 6/8] Better icons --- popup/popup.css | 102 ++++++++++++++++++++++++++---------------------- 1 file changed, 56 insertions(+), 46 deletions(-) diff --git a/popup/popup.css b/popup/popup.css index 6ae609863f..8ffdfde5a5 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -8,11 +8,6 @@ body { background-color: #fff; } -body > div:not(#installed) { - margin-left: 0.75em; - margin-right: 0.75em; -} - .firefox .chromium-only { display: none; } @@ -92,10 +87,10 @@ body.blocked > DIV { #installed .actions a { display: inline-flex; + height: 24px; + width: 23px; justify-content: center; align-items: center; - height: 18px; - width: 18px; cursor: pointer; text-decoration: none; } @@ -192,70 +187,72 @@ body.blocked > DIV { .svg-icon { pointer-events: none; transition: fill .5s; - width: 14px; - height: 16px; fill: #666; } .svg-icon.on, .svg-icon.off { - width: 18px; - height: 18px; + width: 23px; + height: 20px; +} + +a:hover .svg-icon.on, .svg-icon.off { + fill: #999; } -.svg-icon.find-styles, .svg-icon.open-manager, .svg-icon.open-options, .svg-icon.open-shortcuts { +a:hover .svg-icon.off { + fill: #666; +} + +.svg-icon.remove { width: 18px; height: 18px; - fill: hsl(0, 0%, 28%); } -.svg-icon.on { - fill: hsl(0, 0%, 28%); +.svg-icon.write-style { + fill: #000; + width: 20px; + height: 20px; } -.svg-icon.off { - fill: hsl(0, 100%, 45%); +.svg-icon.open-manager { + width: 20px; + height: 20px; } -#installed.disabled .svg-icon.on { - fill: hsl(45, 100%, 38%); +.svg-icon.open-options { + width: 18px; + height: 18px; } +.svg-icon.find-styles { + width: 20px; + height: 20px; +} -#disableAll-label { - cursor: pointer; +.svg-icon.open-shortcuts { + width: 24px; + height: 24px; } -#disableAll-label:hover .svg-icon.all-off, #disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label:hover .svg-icon.all-off, #installed.disabled a:hover .svg-icon.on { - fill: hsl(0, 0%, 0%); +#installed .actions a.enable .svg-icon { + transform: matrix(-1, 0, 0, 1, 0, 0); } -#disableAll-label .svg-icon.all-off { - height: 18px; - width: 18px; - fill: hsl(0, 0%, 28%); +#disableAll-label { + cursor: pointer; } -#disable-all-wrapper input[type="checkbox"]:checked + .main-controls .svg-icon.all-off { +#disableAll-label .svg-icon.disable-all { + height: 18px; width: 18px; - fill: hsl(0, 100%, 45%); } -#disableAll-label::before { - content: ""; - border-radius: 3px; - display: inline-flex; - width: 16px; - height: 16px; - background: #000 url(/images/icon/16.png)no-repeat center; - border: #000 solid; - border-width: 1px 0; - box-shadow: 0 0 3px #000, 0 0 3px hsla(0, 0%, 0%, .5); - margin: 0 4px 0 0; - transition: background .3s, border .3s, box-shadow .3s; +#disable-all-wrapper input[type="checkbox"]:not(:checked) + .main-controls .svg-icon.disable-all.all-off { + display: none; } -#disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label::before { - background: #000 url(/images/icon/16x.png)no-repeat center; +#disable-all-wrapper input[type="checkbox"]:checked + .main-controls .svg-icon.disable-all.all-on { + display: none; } #installed .actions a.delete .svg-icon { @@ -263,13 +260,18 @@ body.blocked > DIV { } #installed .actions a.enable, #installed .actions a.disable { - margin: 0 2px; + margin: 0 4px; } -a:hover .svg-icon { +a:hover .svg-icon, #disableAll-label:hover .svg-icon { fill: #000; } +.style-name:hover { + color: #000; + text-decoration: underline; +} + body > .actions { display: flex; flex-direction: column; @@ -279,15 +281,22 @@ body > .actions { body > .actions > .actions-inner { display: flex; flex-direction: row; + padding-left: 6px; } body > .actions > .actions-inner > div[id] { margin-right: 14px; + height: 24px; + width: 24px; } body > .actions > .actions-inner #disableAll-label, body > .actions > .actions-inner a{ display: inline-flex; cursor: pointer; + height: 24px; + width: 24px; + justify-content: center; + align-items: center; } .actions > div { @@ -326,7 +335,7 @@ body.blocked .actions > .left-gutter { } #write-style-for { - margin-right: .6ex + margin: 0 4px 0 10px; } .write-style-link { @@ -342,6 +351,7 @@ body.blocked .actions > .left-gutter { display: block; flex-grow: 9; min-width: 200px; + line-height: 20px; } /* "breadcrumbs" 'new style' links */ From 08da9afadffbfff6b957c15ef6c19fa22f7884eb Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Wed, 23 Aug 2017 22:18:28 -0400 Subject: [PATCH 7/8] Tweaks --- popup.html | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/popup.html b/popup.html index 520e3e0709..8307bd1658 100644 --- a/popup.html +++ b/popup.html @@ -19,18 +19,18 @@
- + - + - - + +
@@ -88,13 +88,10 @@
+
@@ -110,6 +107,7 @@ + From 9df5540accddc9b144d89bf671fdc3dc6f0cd84c Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Wed, 23 Aug 2017 22:19:12 -0400 Subject: [PATCH 8/8] Tweaks --- popup/popup.css | 108 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 81 insertions(+), 27 deletions(-) diff --git a/popup/popup.css b/popup/popup.css index 8ffdfde5a5..a27e544b15 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -95,6 +95,10 @@ body.blocked > DIV { text-decoration: none; } +#installed .actions a.delete { + width: 18px; +} + /* entry */ .entry { @@ -190,17 +194,53 @@ body.blocked > DIV { fill: #666; } -.svg-icon.on, .svg-icon.off { +a:hover .svg-icon.remove { + fill: #666; +} + +.svg-icon.remove { + fill: #999; +} + +.svg-icon.style-enabled, .svg-icon.style-disabled { width: 23px; height: 20px; } -a:hover .svg-icon.on, .svg-icon.off { - fill: #999; +#installed .actions a.enable .svg-icon { + transform: matrix(-1, 0, 0, 1, 0, 0); } -a:hover .svg-icon.off { - fill: #666; +#installed .actions a.enable, #installed .actions a.disable { + position: relative; +} + +#installed .actions a.enable:before, #installed .actions a.disable:before { + content: ''; + height: 12px; + width: 21px; + position: absolute; + top: 6px; + left: 1px; + border-radius: 10px; + transition: background-color .5s; + z-index: -1; +} + +#installed .actions a.enable:before { + background-color: hsl(0, 0%, 88%); +} + +#installed .actions a.disable:before { + background-color: hsl(0, 0%, 100%); +} + +a:hover .svg-icon.style-enabled, .svg-icon.style-enabled { + fill: hsl(0, 0%, 60%); +} + +a:hover .svg-icon.style-disabled, .svg-icon.style-disabled { + fill: hsl(0, 0%, 44%); } .svg-icon.remove { @@ -215,27 +255,23 @@ a:hover .svg-icon.off { } .svg-icon.open-manager { - width: 20px; - height: 20px; + width: 23px; + height: 23px; } .svg-icon.open-options { - width: 18px; - height: 18px; -} - -.svg-icon.find-styles { width: 20px; height: 20px; } -.svg-icon.open-shortcuts { +.svg-icon.find-styles { width: 24px; height: 24px; } -#installed .actions a.enable .svg-icon { - transform: matrix(-1, 0, 0, 1, 0, 0); +.svg-icon.open-shortcuts { + width: 24px; + height: 24px; } #disableAll-label { @@ -243,20 +279,18 @@ a:hover .svg-icon.off { } #disableAll-label .svg-icon.disable-all { - height: 18px; - width: 18px; -} - -#disable-all-wrapper input[type="checkbox"]:not(:checked) + .main-controls .svg-icon.disable-all.all-off { - display: none; + height: 22px; + width: 22px; + transition: transform .3s, fill .5s; } -#disable-all-wrapper input[type="checkbox"]:checked + .main-controls .svg-icon.disable-all.all-on { - display: none; +#disable-all-wrapper input[type="checkbox"]:checked + .main-controls .svg-icon.disable-all { + fill: #999; + transform: rotate(180deg); } -#installed .actions a.delete .svg-icon { - margin-top: -1px; +#disable-all-wrapper input[type="checkbox"]:checked + .main-controls #disableAll-label:hover .svg-icon.disable-all { + fill: #666; } #installed .actions a.enable, #installed .actions a.disable { @@ -264,7 +298,7 @@ a:hover .svg-icon.off { } a:hover .svg-icon, #disableAll-label:hover .svg-icon { - fill: #000; + fill: #999; } .style-name:hover { @@ -290,7 +324,27 @@ body > .actions > .actions-inner > div[id] { width: 24px; } -body > .actions > .actions-inner #disableAll-label, body > .actions > .actions-inner a{ +#manage { + order: 1; +} + +#find-styles { + order: 2; +} + +#options { + order: 3; +} + +#shortcuts { + order: 4; +} + +#disable-all-wrapper { + order: 5; +} + +body > .actions > .actions-inner #disableAll-label, body > .actions > .actions-inner a { display: inline-flex; cursor: pointer; height: 24px;