From 74cfe6d1af4dac2566828cef0f97daa41d48b18a Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Fri, 25 Mar 2016 23:32:52 +0100 Subject: [PATCH 1/9] Close #20 by removing drag handles. --- css/app.css | 18 ------------------ images/grips/vertical.png | Bin 91 -> 0 bytes images/grips/vertical_dark.png | Bin 164 -> 0 bytes index.html | 9 ++++----- sass/app.scss | 29 ----------------------------- 5 files changed, 4 insertions(+), 52 deletions(-) delete mode 100644 images/grips/vertical.png delete mode 100644 images/grips/vertical_dark.png diff --git a/css/app.css b/css/app.css index 5757e715..9ee265aa 100644 --- a/css/app.css +++ b/css/app.css @@ -117,24 +117,6 @@ ul { max-width: 100%; width: 98%; } -.grip { - position: relative; } - .grip:before { - content: ''; - display: none; - width: 5px; - height: 20px; - background-image: url(../images/grips/vertical_dark.png); - background-repeat: no-repeat; - position: absolute; - top: 50%; - left: 7px; - margin-top: -10px; } - .grip.btn-primary:before { - background-image: url(../images/grips/vertical.png); } - .grip:hover:before { - display: block; } - .key-editor__popup { border: none; width: 0px; diff --git a/images/grips/vertical.png b/images/grips/vertical.png deleted file mode 100644 index 0ac8fa1e03fd46c25f1b22ad9eac95b825edbf91..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 91 zcmeAS@N?(olHy`uVBq!ia0vp^tUxTs!3HFs)Lq#Nq?9~e978mMlP!v$ov9aKV`7t- p&A3{jqq%P*ci$|_EVVde#<~+X&uyMGX&+EEgQu&X%Q~loCIHDl8R-B3 diff --git a/images/grips/vertical_dark.png b/images/grips/vertical_dark.png deleted file mode 100644 index 1b5070d96029e44a21f5c23f1f5f5884e115e872..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 164 zcmeAS@N?(olHy`uVBq!ia0vp^tUxTs!3HFs)Lq#Nq}Y|gW!U_%O?XxI14-? ziy0WWg+Z8+Vb&Z8pdfpRr>`sf17?0v6{{CfP1-;qLr)jS5RLQ6SFT?Dd;Y+I0|hTH zsk+(P?)}dL1U@_w43Gc+|8K~$akY$T@fDvvX-o_c#2r0vM2a*5H8Xg+`njxgN@xNA D*Ap@_ diff --git a/index.html b/index.html index 35905e63..b655e2b7 100644 --- a/index.html +++ b/index.html @@ -45,9 +45,9 @@
- - - + + +
@@ -121,7 +121,7 @@
- Scroll by 150px downdward + Scroll by 150px downward
@@ -199,4 +199,3 @@ - \ No newline at end of file diff --git a/sass/app.scss b/sass/app.scss index 48121274..c2d17b1b 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -191,35 +191,6 @@ ul { } } -.grip { - position: relative; - - &:before { - content: ''; - display: none; - width: 5px; - height: 20px; - background-image: url(../images/grips/vertical_dark.png); - background-repeat: no-repeat; - position: absolute; - top: 50%; - left: 7px; - margin-top: -10px; - } - - &.btn-primary { - &:before { - background-image: url(../images/grips/vertical.png); - } - } - - &:hover { - &:before { - display: block; - } - } -} - .key-editor__popup { border: none; width: 0px; From c62b8506e9e29b562a07702ba2e0f62bac10e04e Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 26 Mar 2016 00:00:06 +0100 Subject: [PATCH 2/9] Close #19 by removing empty stars from the keymap menu items. This way only the currently set default keymap will have an indicator in the menu, and there won't be any interaction possible from there. --- css/app.css | 15 ++------------- index.html | 2 -- sass/app.scss | 25 ++----------------------- 3 files changed, 4 insertions(+), 38 deletions(-) diff --git a/css/app.css b/css/app.css index 9ee265aa..894f9ea7 100644 --- a/css/app.css +++ b/css/app.css @@ -45,24 +45,13 @@ ul { .sidebar__level-2--item.active { background-color: #555; color: #fff; } - .sidebar__level-2--item.active .fa-star, - .sidebar__level-2--item.active .fa-star-o { - display: none; } + .sidebar__level-2--item.active .fa-star { + color: #fff; } .sidebar__level-2--item.active:hover { background-color: #555; } - .sidebar__level-2--item.active:hover .fa-star, - .sidebar__level-2--item.active:hover .fa-star-o { - display: block; - color: #fff; } - .sidebar__level-2--item:hover .fa-star-o { - color: #000; } - .sidebar__level-2--item:hover .fa-star-o:hover { - color: #000; } .sidebar__level-2--item .fa.pull-right { position: relative; top: 2px; } - .sidebar__level-2--item .fa-star-o { - color: #f5f5f5; } .sidebar__level-2--item .fa-star { color: #666; } diff --git a/index.html b/index.html index b655e2b7..8f57fea4 100644 --- a/index.html +++ b/index.html @@ -174,8 +174,6 @@ {{#if menuValue.hasDefaults}} {{#if isDefault}} - {{else}} - {{/if}} {{/if}} diff --git a/sass/app.scss b/sass/app.scss index c2d17b1b..a8bdbc7a 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -69,29 +69,12 @@ ul { background-color: #555; color: #fff; - .fa-star, - .fa-star-o { - display: none; + .fa-star { + color: #fff; } &:hover { background-color: #555; - - .fa-star, - .fa-star-o { - display: block; - color: #fff; - } - } - } - - &:hover { - .fa-star-o { - color: #000; - - &:hover { - color: #000; - } } } @@ -101,10 +84,6 @@ ul { top: 2px; } - .fa-star-o { - color: #f5f5f5; - } - .fa-star { color: #666; } From 4c4717a982f8d5b2cb0f7735c18a672e14b968c8 Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 26 Mar 2016 00:16:39 +0100 Subject: [PATCH 3/9] Set currently selected key's color to the primary color. #21 This commit relates to #18 as well, as we will have to refactor the color set here after finishing that issue. --- sass/app.scss | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/sass/app.scss b/sass/app.scss index a8bdbc7a..e738f588 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -183,18 +183,10 @@ ul { } svg.uhk { - &.faded { - #left-case, - #right-case { - fill: #555; - } - - rect { - fill: #666; - - &.active { - fill: #000; - } + rect { + &.active { + //TODO: use a color variable instead of the declaration below. + fill: #337ab7; } } } From 60b11f9a6940fa19232673c2fc740bed85f24dc0 Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 26 Mar 2016 00:26:59 +0100 Subject: [PATCH 4/9] Add css related to the previous change. #21 --- css/app.css | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/css/app.css b/css/app.css index 894f9ea7..8f3b608a 100644 --- a/css/app.css +++ b/css/app.css @@ -115,11 +115,5 @@ ul { left: 50%; margin-left: -310px; } -svg.uhk.faded #left-case, -svg.uhk.faded #right-case { - fill: #555; } - -svg.uhk.faded rect { - fill: #666; } - svg.uhk.faded rect.active { - fill: #000; } +svg.uhk rect.active { + fill: #337ab7; } From 1c05abe9b9ec921e7d6fce4284715ca1a50a1bae Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 26 Mar 2016 00:27:38 +0100 Subject: [PATCH 5/9] Make scss file from old style.css and compile it as well. #21 --- css/style.css | 99 ++++++++++++++++++++++++++++++++++++ popup__iframe.html | 2 +- style.css => sass/style.scss | 0 3 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 css/style.css rename style.css => sass/style.scss (100%) diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..5e732eeb --- /dev/null +++ b/css/style.css @@ -0,0 +1,99 @@ +h1 { + margin-bottom: 3rem; } + +.popover { + padding: 0; } + +.popover-content { + padding: 10px 24px; } + +.popover-title.menu-tabs { + padding: .5rem .5rem 0; + display: block; } + +.popover-title.menu-button-group { + display: none; } + +.popover-title.menu-tabs .nav-tabs { + position: relative; + top: 1px; } + +.popover.bottom > .arrow:after { + border-bottom-color: #f7f7f7; } + +.popover-actions { + padding: 8px 14px; + margin: 0; + font-size: 14px; + background-color: #f7f7f7; + border-top: 1px solid #ebebeb; + border-radius: 0 0 5px 5px; + text-align: right; } + +.select2-container { + z-index: 100000; } + +.scancode--explanation { + color: lightgray; + float: right; } + +.layout-abbreviation { + font-weight: bold; + color: #FFF; + background: #333; + padding: 4px 8px; + font-family: monospace; + margin-right: .5em; } + +.layout-preview img { + max-width: 100%; + margin-top: 10px; } + +.key-editor--none__description p { + padding: 2rem 0; + margin: 0; + text-align: center; + font-style: italic; + color: #999; } + +.key-editor--none__description .icon { + font-size: 5rem; + color: #feefef; + position: absolute; + z-index: 0; + left: 50%; + margin-left: -2.5rem; + top: 50%; + margin-top: -2.5rem; } + +.select2-item { + position: relative; + font-size: 1.5rem; } + +.select2-item.keymap-name--wrapper { + padding-left: 50px; } + +.select2-item .layout-segment-code { + height: 2rem; + position: absolute; + left: 0; + top: 50%; + margin-top: -1rem; } + +.preview-wrapper img { + max-width: 100%; } + +.global-key-setup.disabled { + opacity: 0; } + +.global-key-setup.disabled .setting-label, +.setting-label.disabled { + color: #999; } + +.global-key-setup--wrapper { + position: relative; } + +.global-key-setup--wrapper .disabled-state--text { + position: absolute; + top: 50%; + margin-top: -4rem; } diff --git a/popup__iframe.html b/popup__iframe.html index 5c8feeee..fed1250a 100644 --- a/popup__iframe.html +++ b/popup__iframe.html @@ -4,7 +4,7 @@ - + Ultimate Hacking Keyboard - Agent mockups diff --git a/style.css b/sass/style.scss similarity index 100% rename from style.css rename to sass/style.scss From f5756a72bd6bbefea79dccb685d9e8de5e2c55b7 Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 26 Mar 2016 00:45:56 +0100 Subject: [PATCH 6/9] Restructure scss file to make use of basic language features. --- css/style.css | 38 ++++++-------- sass/style.scss | 131 +++++++++++++++++++++++++++--------------------- 2 files changed, 89 insertions(+), 80 deletions(-) diff --git a/css/style.css b/css/style.css index 5e732eeb..b7664320 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,7 @@ -h1 { - margin-bottom: 3rem; } - .popover { padding: 0; } + .popover.bottom > .arrow:after { + border-bottom-color: #f7f7f7; } .popover-content { padding: 10px 24px; } @@ -18,9 +17,6 @@ h1 { position: relative; top: 1px; } -.popover.bottom > .arrow:after { - border-bottom-color: #f7f7f7; } - .popover-actions { padding: 8px 14px; margin: 0; @@ -69,31 +65,29 @@ h1 { .select2-item { position: relative; font-size: 1.5rem; } - -.select2-item.keymap-name--wrapper { - padding-left: 50px; } - -.select2-item .layout-segment-code { - height: 2rem; - position: absolute; - left: 0; - top: 50%; - margin-top: -1rem; } + .select2-item.keymap-name--wrapper { + padding-left: 50px; } + .select2-item .layout-segment-code { + height: 2rem; + position: absolute; + left: 0; + top: 50%; + margin-top: -1rem; } .preview-wrapper img { max-width: 100%; } .global-key-setup.disabled { opacity: 0; } + .global-key-setup.disabled .setting-label { + color: #999; } -.global-key-setup.disabled .setting-label, .setting-label.disabled { color: #999; } .global-key-setup--wrapper { position: relative; } - -.global-key-setup--wrapper .disabled-state--text { - position: absolute; - top: 50%; - margin-top: -4rem; } + .global-key-setup--wrapper .disabled-state--text { + position: absolute; + top: 50%; + margin-top: -4rem; } diff --git a/sass/style.scss b/sass/style.scss index a46aae4c..ab11649d 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,31 +1,35 @@ -h1 { - margin-bottom: 3rem; -} - .popover { padding: 0; + + &.bottom { + > .arrow { + &:after { + border-bottom-color: #f7f7f7; + } + } + } } .popover-content { padding: 10px 24px; } -.popover-title.menu-tabs { - padding: .5rem .5rem 0; - display: block; -} +.popover-title { + &.menu-tabs { + padding: .5rem .5rem 0; + display: block; + } -.popover-title.menu-button-group { - display: none; -} + &.menu-button-group { + display: none; + } -.popover-title.menu-tabs .nav-tabs { - position: relative; - top: 1px; -} - -.popover.bottom > .arrow:after { - border-bottom-color: #f7f7f7; + &.menu-tabs { + .nav-tabs { + position: relative; + top: 1px; + } + } } .popover-actions { @@ -61,61 +65,72 @@ h1 { margin-top: 10px; } -.key-editor--none__description p { - padding: 2rem 0; - margin: 0; - text-align: center; - font-style: italic; - color: #999; -} +.key-editor--none__description { + p { + padding: 2rem 0; + margin: 0; + text-align: center; + font-style: italic; + color: #999; + } -.key-editor--none__description .icon { - font-size: 5rem; - color: #feefef; - position: absolute; - z-index: 0; - left: 50%; - margin-left: -2.5rem; - top: 50%; - margin-top: -2.5rem; + .icon { + font-size: 5rem; + color: #feefef; + position: absolute; + z-index: 0; + left: 50%; + margin-left: -2.5rem; + top: 50%; + margin-top: -2.5rem; + } } .select2-item { position: relative; font-size: 1.5rem; + + &.keymap-name--wrapper { + padding-left: 50px; + } + + .layout-segment-code { + height: 2rem; + position: absolute; + left: 0; + top: 50%; + margin-top: -1rem; + } } -.select2-item.keymap-name--wrapper { - padding-left: 50px; +.preview-wrapper { + img { + max-width: 100%; + } } -.select2-item .layout-segment-code { - height: 2rem; - position: absolute; - left: 0; - top: 50%; - margin-top: -1rem; +.global-key-setup { + &.disabled { + opacity: 0; + + .setting-label { + color: #999; + } + } } -.preview-wrapper img { - max-width: 100%; -} - -.global-key-setup.disabled { - opacity: 0; -} - -.global-key-setup.disabled .setting-label, -.setting-label.disabled { - color: #999; +.setting-label { + &.disabled { + color: #999; + } } .global-key-setup--wrapper { position: relative; -} -.global-key-setup--wrapper .disabled-state--text { - position: absolute; - top: 50%; - margin-top: -4rem; + .disabled-state--text { + position: absolute; + top: 50%; + margin-top: -4rem; + } } From 5099ea2f01f1fcb0a05222f7faa9cf98fa69fd78 Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 26 Mar 2016 00:47:38 +0100 Subject: [PATCH 7/9] Close #21 by making the border of the popover's tip black. --- css/style.css | 6 ++++-- sass/style.scss | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index b7664320..9cc9bf9a 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,9 @@ .popover { padding: 0; } - .popover.bottom > .arrow:after { - border-bottom-color: #f7f7f7; } + .popover.bottom > .arrow { + border-bottom-color: #000; } + .popover.bottom > .arrow:after { + border-bottom-color: #f7f7f7; } .popover-content { padding: 10px 24px; } diff --git a/sass/style.scss b/sass/style.scss index ab11649d..51b95cb9 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -3,6 +3,8 @@ &.bottom { > .arrow { + border-bottom-color: #000; + &:after { border-bottom-color: #f7f7f7; } From f844350782f6dce48df18d64bf6fdfa0e6cc6d96 Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 26 Mar 2016 00:54:25 +0100 Subject: [PATCH 8/9] Change the order of Scancode and Modifiers fixing #23. I find the current spacing between the "Long press action" and the "Modifiers" is enough, and not too much. --- popup__iframe.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/popup__iframe.html b/popup__iframe.html index fed1250a..66723f1c 100644 --- a/popup__iframe.html +++ b/popup__iframe.html @@ -87,21 +87,6 @@
-
- Modifiers: -
-
- {{#each modifiers.left}} - - {{/each}} -
-
- {{#each modifiers.right}} - - {{/each}} -
-
-
Scancode: