From f6a55f9d9428808393d245f8a42b773cdfc95f53 Mon Sep 17 00:00:00 2001 From: mozilla Date: Fri, 1 Dec 2017 16:31:07 -0800 Subject: [PATCH 1/9] Staring work on light-theme for section header UI. --- public/editor/scripts/ui/menus.js | 2 + public/editor/stylesheets/editor.less | 57 +++++++++++++++++++++------ views/editor/nav-options.html | 2 +- 3 files changed, 47 insertions(+), 14 deletions(-) diff --git a/public/editor/scripts/ui/menus.js b/public/editor/scripts/ui/menus.js index 726e60728..eed861fac 100644 --- a/public/editor/scripts/ui/menus.js +++ b/public/editor/scripts/ui/menus.js @@ -328,6 +328,7 @@ function setupOptionsMenu(bramble) { function lightThemeUI() { var transitionSpeed = 200; + $(".bramble-toolbar").removeClass("dark"); $("#sun-green").fadeIn(transitionSpeed); $("#moon-white").fadeIn(transitionSpeed); $("#sun-white").fadeOut(transitionSpeed); @@ -347,6 +348,7 @@ function setupOptionsMenu(bramble) { function darkThemeUI() { var transitionSpeed = 200; + $(".bramble-toolbar").addClass("dark"); $("#moon-green").fadeIn(transitionSpeed); $("#sun-white").fadeIn(transitionSpeed); $("#moon-white").fadeOut(transitionSpeed); diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index cabe1ea65..58acde349 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -76,10 +76,14 @@ body { left: 0; z-index: 2; height: @toolbarHeight; - background-color: #212121; vertical-align: top; float: left; overflow: hidden; + background-color: #AAA; + + .dark & { + background-color: #212121; + } .narrow { display: none; @@ -87,12 +91,15 @@ body { } .filetree-pane-nav-title { - color: white; + color: black; font-weight: 600; font-size: 1em; opacity: 0.45; - filter: alpha(opacity=45); .vertical-align; + + .dark & { + color: white; + } } .filetree-pane-nav-btn { @@ -195,8 +202,9 @@ body { width: 50%; z-index: 2; height: @toolbarHeight; - background-color: #3f3f3f; - color: #757575; + border-right: solid 1px #BBB; + // background: #CCC; + color: black; float: left; overflow: hidden; @@ -205,11 +213,10 @@ body { } .editor-pane-nav-title { - color: white; font-weight: 600; opacity: 0.45; - filter: alpha(opacity=45); margin-right: 10px; + color: black; .vertical-align; } @@ -217,6 +224,16 @@ body { margin-right: 10px; font-weight: 600; } + + .dark & { + color: #757575; + background-color: #3f3f3f; + + .editor-pane-nav-title { + color: white; + } + } + } #editor-pane-nav-fileview { @@ -341,7 +358,7 @@ body { /* Snippets */ #editor-pane-nav-snippets { - background-color: #2b2b2b; + background-color: #f9f9f9; height: 30px; width: 30px; text-align: center; @@ -350,17 +367,31 @@ body { position: relative; .icon; - img { - opacity: 0.5; - height: 20px; + .editor-icon { width: 20px; + height: 20px; + display: inline-block; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; position: absolute; top: 5px; left: 5px; + background-image: url("/img/icon/snippets-light-theme.svg"); + opacity: .3; + } + + .dark & .editor-icon { + background-image: url("/img/icon/snippets.svg"); + opacity: .5; + } + + &:hover .editor-icon { + opacity: .7; } - &:hover img { - opacity: 0.7; + .dark & { + background-color: #2b2b2b; } } diff --git a/views/editor/nav-options.html b/views/editor/nav-options.html index 5a755cec9..90021870e 100644 --- a/views/editor/nav-options.html +++ b/views/editor/nav-options.html @@ -56,7 +56,7 @@
- +
From 75e4e33af6da2498bf0fd0a811278897a50cc6c3 Mon Sep 17 00:00:00 2001 From: mozilla Date: Fri, 1 Dec 2017 16:41:52 -0800 Subject: [PATCH 2/9] Slight CSS reformatting --- public/editor/stylesheets/editor.less | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index 58acde349..78a8385e2 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -381,10 +381,6 @@ body { opacity: .3; } - .dark & .editor-icon { - background-image: url("/img/icon/snippets.svg"); - opacity: .5; - } &:hover .editor-icon { opacity: .7; @@ -392,6 +388,11 @@ body { .dark & { background-color: #2b2b2b; + + .editor-icon { + background-image: url("/img/icon/snippets.svg"); + opacity: .5; + } } } From 71d067c0cfee20a1f9e4d6e5c9b7610b989a3e26 Mon Sep 17 00:00:00 2001 From: mozilla Date: Mon, 4 Dec 2017 14:55:37 -0800 Subject: [PATCH 3/9] Continued styling work --- public/editor/stylesheets/editor.less | 480 ++++++++++-------- .../img/icon/file-tray-arrow-left.svg | 12 - .../img/icon/file-tray-arrow-right.svg | 12 - public/resources/img/icon/gear-black.svg | 38 +- public/resources/img/icon/redo.svg | 12 - public/resources/img/icon/snippets.svg | 5 - public/resources/img/icon/undo.svg | 12 - views/editor/nav-options.html | 13 +- 8 files changed, 276 insertions(+), 308 deletions(-) delete mode 100644 public/resources/img/icon/file-tray-arrow-left.svg delete mode 100644 public/resources/img/icon/file-tray-arrow-right.svg delete mode 100644 public/resources/img/icon/redo.svg delete mode 100644 public/resources/img/icon/snippets.svg delete mode 100644 public/resources/img/icon/undo.svg diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index 78a8385e2..01fd0e3f2 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -11,8 +11,8 @@ body { @toolbarHeight: 60px; @brambleTop: 120px; -/* Transition time for hover effects */ -@transitionTime: 0.15s; +// Global transition time +@transitionTime: 0.1s; #webmaker-bramble { position: absolute; @@ -25,7 +25,7 @@ body { background-color: #f8f8f8; } -// Logo position overrides +// Green header bar .navbar-thimble { background: #2d9961; position: relative; @@ -36,14 +36,13 @@ body { } } +// Wrapper for headers above each pane .bramble-toolbar { position: absolute; z-index: 2; top: @headerHeight; height: @toolbarHeight; width: 100%; - margin: 0; - padding: 0; background: #eaeaea; } @@ -52,11 +51,11 @@ body { } .editor-nav { - position: absolute; - display: block; - top: 0; - width: 100%; - height: 0; + // position: absolute; + // display: block; + // top: 0; + // width: 100%; + // height: 0; } // For capturing mouse events over the iframe when menus appear overtop. @@ -70,7 +69,7 @@ body { overflow: hidden; } -/* ------ FILETREE PANE ------ */ +// Header bar above FILES pane .filetree-pane-nav { top: 0; left: 0; @@ -79,10 +78,30 @@ body { vertical-align: top; float: left; overflow: hidden; - background-color: #AAA; + + .nav-container { + box-sizing: border-box; + border-right: solid 1px #CCC; + } + + .filetree-pane-nav-title { + color: black; + font-weight: 600; + font-size: 1em; + opacity: 0.45; + .vertical-align; + + .dark & { + color: white; + } + } .dark & { background-color: #212121; + + .nav-container { + border: none; + } } .narrow { @@ -90,78 +109,102 @@ body { } } -.filetree-pane-nav-title { - color: black; - font-weight: 600; - font-size: 1em; - opacity: 0.45; - .vertical-align; - .dark & { - color: white; +// Shared styles for icons that show & hide the file view +#editor-pane-nav-fileview, #filetree-pane-nav-hide { + .light-theme-icon-colors; + width: 25px; + height: 25px; + border-radius: 2px; + cursor: pointer; + + .icon-container { + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: center; + background-size: 10px 10px; } } -.filetree-pane-nav-btn { - width: 100%; - height: 100%; - background-repeat: no-repeat; - background-position: center; - background-size: 10px 10px; -} +// Show filetree button +#editor-pane-nav-fileview { + margin-right: 10px; -#filetree-pane-nav-add { - width: 25px; - height: 25px; - background-color: @buttonGreen; - margin-right: 5px; - border-radius: 1px; - .icon; - .transition; + .icon-container { + background-image: url("/img/icon/file-tray-arrow-right-black.svg"); + } - div { - background-image: url("/img/icon/file-white.svg"); - background-size: 13px 15px; + .dark & { + background-color: #2b2b2b; + + .icon-container { + background-image: url("/img/icon/file-tray-arrow-right-white.svg"); + opacity: .2 + } + + &:hover { + .icon-container { + opacity: .4; + } + } + + &:active { + background-color: #1b1b1b; + } } +} - &:hover { - background-color: @buttonGreenHover; +// Hide filetree button +#filetree-pane-nav-hide { + .icon-container { + background-image: url("/img/icon/file-tray-arrow-left-black.svg"); } - &:active { - background-color: @buttonGreenActive; + .dark & { + background-color: #3f3f3f; + + &:hover { + background-color: #585858; + } + + &:active { + .icon-container { + opacity: .7; + } + } + } } -#filetree-pane-nav-hide { +// Add file button +#filetree-pane-nav-add { width: 25px; height: 25px; - background-color: #3f3f3f; - border-radius: 1px; - .icon; + background-color: @buttonGreen; + margin-right: 5px; + border-radius: 2px; .transition; div { - background-image: url("/img/icon/file-tray-arrow-left.svg"); - opacity: 0.4; - background-repeat: no-repeat; + background-image: url("/img/icon/file-white.svg"); + background-size: 13px 15px; + width: 100%; background-position: center; - background-size: 10px; + background-repeat: no-repeat; + height: 100%; } &:hover { - background-color: #4f4f4f; + background-color: @buttonGreenHover; } &:active { - div { - opacity: 0.7; - } - - background-color: #4f4f4f; + background-color: @buttonGreenActive; } } +// Add file menu button #filetree-pane-nav-add-menu { position: absolute; z-index: 151; @@ -186,8 +229,6 @@ body { &:hover { background-color: rgba(0, 0, 0, 0.05); } - - .icon; } .top-border { @@ -196,14 +237,13 @@ body { } } -/* ------ LEFT PANE ------ */ +// Header above Editor pane .editor-pane-nav { top: 0; width: 50%; z-index: 2; height: @toolbarHeight; border-right: solid 1px #BBB; - // background: #CCC; color: black; float: left; overflow: hidden; @@ -213,8 +253,8 @@ body { } .editor-pane-nav-title { - font-weight: 600; - opacity: 0.45; + font-weight: bold; + opacity: 0.6; margin-right: 10px; color: black; .vertical-align; @@ -223,180 +263,175 @@ body { #editor-pane-nav-filename { margin-right: 10px; font-weight: 600; + opacity: .3; } .dark & { color: #757575; background-color: #3f3f3f; + border: none; .editor-pane-nav-title { color: white; } - } + #editor-pane-nav-filename { + opacity: 1; + } + } } -#editor-pane-nav-fileview { - width: 25px; - height: 25px; - margin-right: 10px; - background-color: #2b2b2b; - border-radius: 2px; - .icon; +// Header icon structure +.header-button { + height: 30px; + width: 30px; + border-radius: 15px; + margin-left: 6px; + position: relative; + cursor: pointer; + user-select: none; + transition: background @transitionTime ease-out; - div { - width: 100%; - height: 100%; - background-image: url("/img/icon/file-tray-arrow-right.svg"); - opacity: 0.2; - background-repeat: no-repeat; + .icon-container { + display: block; + background-size: 100%; background-position: center; - background-size: 10px; - .transition; + background-repeat: no-repeat; + width: 30px; + height: 30px; + transition: opacity @transitionTime ease-out; } +} + +// Light theme for header icons +.light-theme-icon-colors { + background-color: #f9f9f9; - &:hover div { - opacity: 0.4; + .icon-container { + opacity: .3; + transition: opacity @transitionTime ease-out; } - &:active { - background-color: #1b1b1b; + &:hover { + .icon-container { + opacity: .5; + } + } + + &:active, &.active { + background-color: white; + .icon-container { + opacity: .7; + } + } +} + +// Dark theme for header icons +.dark-theme-icon-colors { + .dark & { + background-color: #2b2b2b; + + &:hover .icon-container { + opacity: .5; + } + + &:active, &.active { + background-color: #1b1b1b; + + .icon-container { + opacity: .8; + } + } } } +// Undo button #editor-pane-nav-undo { - background-color: #2b2b2b; - border-radius: 25px; + .header-button; + .light-theme-icon-colors; + .dark-theme-icon-colors; + height: 20px; - padding: 5px 8px 5px 7px; + width: auto; + padding: 5px 8px 5px 30px; position: relative; - .icon; - - img { - opacity: 0.5; - filter: alpha(opacity=50); - height: 15px; - width: 15px; - position: relative; + .icon-container { + background-image: url("/img/icon/undo-black.svg"); + background-size: 15px; + position: absolute; top: 0; - .transition; + left: 0; + } + + .dark & .icon-container { + background-image: url("/img/icon/undo-white.svg"); } span { - color: white; vertical-align: top; position: relative; top: -1px; - opacity: 0.5; - filter: alpha(opacity=50); + opacity: .3; + color: black; .transition; } - &:hover { - img { - opacity: 0.7; - filter: alpha(opacity=70); - } + &:hover span { + opacity: .5; + } - span { - opacity: 0.7; - filter: alpha(opacity=70); - } + &:active span { + opacity: .7; } - &:active { - background-color: #1b1b1b; + .dark & { + span { + color: white; + } - img { - opacity: 0.8; + &:hover span { + opacity: 0.5; } - span { + &:active span { opacity: 0.8; - filter: alpha(opacity=80); } } } +// Redo button #editor-pane-nav-redo { - background-color: #2b2b2b; - height: 20px; - width: 20px; - padding: 5px; - border-radius: 50%; - margin-left: 6px; - position: relative; - .icon; + .header-button; + .light-theme-icon-colors; + .dark-theme-icon-colors; - img { - opacity: 0.5; - filter: alpha(opacity=50); - height: 15px; - width: 15px; - position: absolute; - top: 7px; - left: 8px; - .transition; + .icon-container { + background-image: url("/img/icon/redo-black.svg"); + background-size: 15px; } - &:hover { - img { - opacity: 0.7; - filter: alpha(opacity=70); - } - } - - &:active { - img { - opacity: 0.8; - } - - background-color: #1b1b1b; + .dark & .icon-container { + background-image: url("/img/icon/redo-white.svg"); } } -/* Snippets */ +// Snippets button #editor-pane-nav-snippets { - background-color: #f9f9f9; - height: 30px; - width: 30px; - text-align: center; - border-radius: 50%; - margin-left: 6px; - position: relative; - .icon; - - .editor-icon { - width: 20px; - height: 20px; - display: inline-block; - background-size: 100%; - background-repeat: no-repeat; - background-position: center; - position: absolute; - top: 5px; - left: 5px; - background-image: url("/img/icon/snippets-light-theme.svg"); - opacity: .3; - } + .header-button; + .light-theme-icon-colors; + .dark-theme-icon-colors; - - &:hover .editor-icon { - opacity: .7; + .icon-container { + background-image: url("/img/icon/snippets-black.svg"); + background-size: 20px; } - - .dark & { - background-color: #2b2b2b; - - .editor-icon { - background-image: url("/img/icon/snippets.svg"); - opacity: .5; - } + .dark & .icon-container { + background-image: url("/img/icon/snippets-white.svg"); } } -/* ------ EDITOR SNIPPETS MENU - START ------ */ +// Snippets Menu .snippets-menu-container { position: absolute; z-index: 151; @@ -482,8 +517,6 @@ body { &.selected { background-color: rgba(0, 0, 0, 0.1); } - - .icon; } .top-border { @@ -517,36 +550,51 @@ body { } } -/* ------ EDITOR SNIPPETS MENU - END ------ */ - -#editor-pane-nav-options.active, -#editor-pane-nav-options:hover { - opacity: 0.7; - filter: alpha(opacity=70); -} - +// Settings (gear) buttons #editor-pane-nav-options { - opacity: 0.5; - filter: alpha(opacity=50); + opacity: .3; padding: 4px; - .transition; + transition: opacity @transitionTime ease-out; + cursor: pointer; - margin-left: 6px; + &:hover { + opacity: .5; + } - .icon; + &:active, &.active { + opacity: .7; + } - img { - width: 22px; + .icon-container { display: block; + background-size: 100%; + background-position: center; + background-repeat: no-repeat; + width: 22px; + height: 22px; + background-image: url("/img/icon/gear-black.svg"); } -} -#editor-pane-nav-options:hover { - opacity: 0.7; - filter: alpha(opacity=70); + .dark & { + opacity: .5; + + .icon-container { + background-image: url("/img/icon/gear-white.svg"); + } + + &:hover { + opacity: .7; + } + + &:active, &.active { + opacity: .8; + } + } + + margin-left: 6px; } -/* ------ EDITOR OPTIONS MENU ------ */ +// Settings (gear) menu #editor-pane-nav-options-menu { position: absolute; z-index: 151; @@ -581,7 +629,7 @@ body { } } -.arrow-tip { +.bramble-toolbar .arrow-tip { position: absolute; border-style: solid; border-width: 0 15px 15px; @@ -593,7 +641,7 @@ body { left: calc(~"50% - 11px"); } -// Line wrap toggle +// Switch toggle for editor settings #editor-pane-nav-options-menu { .switch-toggle { position: absolute; @@ -635,7 +683,7 @@ body { border-radius: 15px; top: 0; left: 0; - transition: left 0.1s ease-out; + transition: left ease-out; } .toggle-backing { @@ -662,7 +710,7 @@ body { } } -/* Font increase/decrease */ +// Text Size UI .text-size-ui { position: absolute; right: 18px; @@ -688,7 +736,6 @@ body { color: white; font-size: 1.2em; display: inline-block; - .icon; .transition; &:hover { @@ -701,7 +748,7 @@ body { } } -/* Theme toggle*/ +// Theme Toggle #editor-pane-nav-toggle-theme { margin-left: auto; background-color: #55986c; @@ -756,7 +803,7 @@ body { } } -/* ------ RIGHT PANE ------ */ +// Header above Preview pane .preview-tutorial-toggle { .preview-pane-nav-title { padding-bottom: 1px; @@ -799,6 +846,7 @@ body { padding: 5px; border-radius: 50%; border: solid 2px #eaeaea; + cursor: pointer; &.spin img { animation: spin 0.25s ease-out; @@ -814,7 +862,6 @@ body { left: -1px; .transition; } - .icon; &:hover { img { @@ -909,7 +956,6 @@ body { position: absolute; height: @toolbarHeight; z-index: 2; - background-color: #eaeaea; float: right; overflow: hidden; @@ -934,6 +980,7 @@ body { border-radius: 50%; position: relative; margin-left: 6px; + cursor: pointer; .icon-wrapper { position: absolute; @@ -965,8 +1012,6 @@ body { opacity: 1; } } - - .icon; } .preview-device-toggle { @@ -974,6 +1019,7 @@ body { border-radius: 30px; height: 30px; margin-left: 6px; + cursor: pointer; img { width: 20px; @@ -985,8 +1031,6 @@ body { } #preview-pane-nav-desktop { - .icon; - margin-left: 13px; } @@ -995,8 +1039,6 @@ body { } #preview-pane-nav-phone { - .icon; - margin: 0 10px 0 4px; } @@ -1057,13 +1099,6 @@ body { transition-timing-function: ease-out; } -.icon { - cursor: pointer; - -webkit-user-select: none; /* Chrome/Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+ */ -} - .flex-container { display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1224,7 +1259,6 @@ body { width: 98px; height: 52px; padding: 4px; - background: rgba(0, 0, 0, 0.3); border-radius: 3px; box-sizing: border-box; @@ -1276,7 +1310,7 @@ body { body.modal-open .dialog-overlay { display: block; z-index: 99; - animation: showModalBackdrop 0.1s ease-out; + animation: showModalBackdrop ease-out; @keyframes showModalBackdrop { 0% { diff --git a/public/resources/img/icon/file-tray-arrow-left.svg b/public/resources/img/icon/file-tray-arrow-left.svg deleted file mode 100644 index 351674d15..000000000 --- a/public/resources/img/icon/file-tray-arrow-left.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - file-tray-arrow-left - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/public/resources/img/icon/file-tray-arrow-right.svg b/public/resources/img/icon/file-tray-arrow-right.svg deleted file mode 100644 index 0c37528df..000000000 --- a/public/resources/img/icon/file-tray-arrow-right.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - file-tray-arrow - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/public/resources/img/icon/gear-black.svg b/public/resources/img/icon/gear-black.svg index 533520b5e..23a6faf3b 100644 --- a/public/resources/img/icon/gear-black.svg +++ b/public/resources/img/icon/gear-black.svg @@ -1,26 +1,12 @@ - - - - -settings-gear -Created with Sketch. - - - - - - + + + + settings-gear + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/redo.svg b/public/resources/img/icon/redo.svg deleted file mode 100644 index 5fb257a9a..000000000 --- a/public/resources/img/icon/redo.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - redo - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/public/resources/img/icon/snippets.svg b/public/resources/img/icon/snippets.svg deleted file mode 100644 index 72a8d5f75..000000000 --- a/public/resources/img/icon/snippets.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/resources/img/icon/undo.svg b/public/resources/img/icon/undo.svg deleted file mode 100644 index 93e800f93..000000000 --- a/public/resources/img/icon/undo.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - undo - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/views/editor/nav-options.html b/views/editor/nav-options.html index 90021870e..5445704b9 100644 --- a/views/editor/nav-options.html +++ b/views/editor/nav-options.html @@ -26,7 +26,7 @@
-
+
@@ -37,7 +37,7 @@
-
+
{{ gettext("navEditor") }} @@ -47,17 +47,18 @@
- +
{{ gettext("navUndo") }}
- +
-
+
+
@@ -108,7 +109,7 @@

{{ gettext("snippetMenuTitle") }}

- +
    From dd7d2da44df56e9dcfcb6526959c2641b60d2a47 Mon Sep 17 00:00:00 2001 From: mozilla Date: Mon, 4 Dec 2017 15:07:39 -0800 Subject: [PATCH 4/9] Missing icons that were .gitignored by accident --- .../img/icon/file-tray-arrow-left-black.svg | 12 ++++++++++++ .../img/icon/file-tray-arrow-left-white.svg | 12 ++++++++++++ .../img/icon/file-tray-arrow-right-black.svg | 12 ++++++++++++ .../img/icon/file-tray-arrow-right-white.svg | 12 ++++++++++++ public/resources/img/icon/github-icon.svg | 1 + public/resources/img/icon/github.svg | 0 public/resources/img/icon/js.svg | 1 + public/resources/img/icon/redo-black.svg | 12 ++++++++++++ public/resources/img/icon/redo-white.svg | 12 ++++++++++++ public/resources/img/icon/snippets-black.svg | 5 +++++ public/resources/img/icon/snippets-white.svg | 5 +++++ public/resources/img/icon/undo-black.svg | 12 ++++++++++++ public/resources/img/icon/undo-white.svg | 12 ++++++++++++ 13 files changed, 108 insertions(+) create mode 100644 public/resources/img/icon/file-tray-arrow-left-black.svg create mode 100644 public/resources/img/icon/file-tray-arrow-left-white.svg create mode 100644 public/resources/img/icon/file-tray-arrow-right-black.svg create mode 100644 public/resources/img/icon/file-tray-arrow-right-white.svg create mode 100644 public/resources/img/icon/github-icon.svg create mode 100644 public/resources/img/icon/github.svg create mode 100644 public/resources/img/icon/js.svg create mode 100644 public/resources/img/icon/redo-black.svg create mode 100644 public/resources/img/icon/redo-white.svg create mode 100644 public/resources/img/icon/snippets-black.svg create mode 100644 public/resources/img/icon/snippets-white.svg create mode 100644 public/resources/img/icon/undo-black.svg create mode 100644 public/resources/img/icon/undo-white.svg diff --git a/public/resources/img/icon/file-tray-arrow-left-black.svg b/public/resources/img/icon/file-tray-arrow-left-black.svg new file mode 100644 index 000000000..351674d15 --- /dev/null +++ b/public/resources/img/icon/file-tray-arrow-left-black.svg @@ -0,0 +1,12 @@ + + + + file-tray-arrow-left + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/file-tray-arrow-left-white.svg b/public/resources/img/icon/file-tray-arrow-left-white.svg new file mode 100644 index 000000000..792605b31 --- /dev/null +++ b/public/resources/img/icon/file-tray-arrow-left-white.svg @@ -0,0 +1,12 @@ + + + + file-tray-arrow-left + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/file-tray-arrow-right-black.svg b/public/resources/img/icon/file-tray-arrow-right-black.svg new file mode 100644 index 000000000..2ff8114e2 --- /dev/null +++ b/public/resources/img/icon/file-tray-arrow-right-black.svg @@ -0,0 +1,12 @@ + + + + file-tray-arrow + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/file-tray-arrow-right-white.svg b/public/resources/img/icon/file-tray-arrow-right-white.svg new file mode 100644 index 000000000..0c37528df --- /dev/null +++ b/public/resources/img/icon/file-tray-arrow-right-white.svg @@ -0,0 +1,12 @@ + + + + file-tray-arrow + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/github-icon.svg b/public/resources/img/icon/github-icon.svg new file mode 100644 index 000000000..dda290759 --- /dev/null +++ b/public/resources/img/icon/github-icon.svg @@ -0,0 +1 @@ +github-icon \ No newline at end of file diff --git a/public/resources/img/icon/github.svg b/public/resources/img/icon/github.svg new file mode 100644 index 000000000..e69de29bb diff --git a/public/resources/img/icon/js.svg b/public/resources/img/icon/js.svg new file mode 100644 index 000000000..7f14b00c9 --- /dev/null +++ b/public/resources/img/icon/js.svg @@ -0,0 +1 @@ +js \ No newline at end of file diff --git a/public/resources/img/icon/redo-black.svg b/public/resources/img/icon/redo-black.svg new file mode 100644 index 000000000..5a1773fe6 --- /dev/null +++ b/public/resources/img/icon/redo-black.svg @@ -0,0 +1,12 @@ + + + + redo + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/redo-white.svg b/public/resources/img/icon/redo-white.svg new file mode 100644 index 000000000..5fb257a9a --- /dev/null +++ b/public/resources/img/icon/redo-white.svg @@ -0,0 +1,12 @@ + + + + redo + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/snippets-black.svg b/public/resources/img/icon/snippets-black.svg new file mode 100644 index 000000000..baf5eb3b5 --- /dev/null +++ b/public/resources/img/icon/snippets-black.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/snippets-white.svg b/public/resources/img/icon/snippets-white.svg new file mode 100644 index 000000000..72a8d5f75 --- /dev/null +++ b/public/resources/img/icon/snippets-white.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/undo-black.svg b/public/resources/img/icon/undo-black.svg new file mode 100644 index 000000000..a9712e1ba --- /dev/null +++ b/public/resources/img/icon/undo-black.svg @@ -0,0 +1,12 @@ + + + + undo + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/img/icon/undo-white.svg b/public/resources/img/icon/undo-white.svg new file mode 100644 index 000000000..93e800f93 --- /dev/null +++ b/public/resources/img/icon/undo-white.svg @@ -0,0 +1,12 @@ + + + + undo + Created with Sketch. + + + + + + + \ No newline at end of file From 12dc0a416f165acda69a457a1786ca9ce9f47361 Mon Sep 17 00:00:00 2001 From: mozilla Date: Mon, 4 Dec 2017 15:23:17 -0800 Subject: [PATCH 5/9] Lint fixes --- public/editor/stylesheets/editor.less | 57 ++++++++++++++------------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index 01fd0e3f2..6ba630d94 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -81,7 +81,7 @@ body { .nav-container { box-sizing: border-box; - border-right: solid 1px #CCC; + border-right: solid 1px #ccc; } .filetree-pane-nav-title { @@ -109,9 +109,9 @@ body { } } - // Shared styles for icons that show & hide the file view -#editor-pane-nav-fileview, #filetree-pane-nav-hide { +#editor-pane-nav-fileview, +#filetree-pane-nav-hide { .light-theme-icon-colors; width: 25px; height: 25px; @@ -140,12 +140,12 @@ body { .icon-container { background-image: url("/img/icon/file-tray-arrow-right-white.svg"); - opacity: .2 + opacity: 0.2; } &:hover { .icon-container { - opacity: .4; + opacity: 0.4; } } @@ -170,10 +170,9 @@ body { &:active { .icon-container { - opacity: .7; + opacity: 0.7; } } - } } @@ -243,7 +242,7 @@ body { width: 50%; z-index: 2; height: @toolbarHeight; - border-right: solid 1px #BBB; + border-right: solid 1px #bbb; color: black; float: left; overflow: hidden; @@ -263,7 +262,7 @@ body { #editor-pane-nav-filename { margin-right: 10px; font-weight: 600; - opacity: .3; + opacity: 0.3; } .dark & { @@ -308,20 +307,21 @@ body { background-color: #f9f9f9; .icon-container { - opacity: .3; + opacity: 0.3; transition: opacity @transitionTime ease-out; } &:hover { .icon-container { - opacity: .5; + opacity: 0.5; } } - &:active, &.active { + &:active, + &.active { background-color: white; .icon-container { - opacity: .7; + opacity: 0.7; } } } @@ -332,14 +332,15 @@ body { background-color: #2b2b2b; &:hover .icon-container { - opacity: .5; + opacity: 0.5; } - &:active, &.active { + &:active, + &.active { background-color: #1b1b1b; .icon-container { - opacity: .8; + opacity: 0.8; } } } @@ -372,17 +373,17 @@ body { vertical-align: top; position: relative; top: -1px; - opacity: .3; + opacity: 0.3; color: black; .transition; } &:hover span { - opacity: .5; + opacity: 0.5; } &:active span { - opacity: .7; + opacity: 0.7; } .dark & { @@ -552,17 +553,18 @@ body { // Settings (gear) buttons #editor-pane-nav-options { - opacity: .3; + opacity: 0.3; padding: 4px; transition: opacity @transitionTime ease-out; cursor: pointer; &:hover { - opacity: .5; + opacity: 0.5; } - &:active, &.active { - opacity: .7; + &:active, + &.active { + opacity: 0.7; } .icon-container { @@ -576,18 +578,19 @@ body { } .dark & { - opacity: .5; + opacity: 0.5; .icon-container { background-image: url("/img/icon/gear-white.svg"); } &:hover { - opacity: .7; + opacity: 0.7; } - &:active, &.active { - opacity: .8; + &:active, + &.active { + opacity: 0.8; } } From 77166860534dd8fcc5a1a337706a265c3c1172c1 Mon Sep 17 00:00:00 2001 From: mozilla Date: Mon, 4 Dec 2017 15:28:56 -0800 Subject: [PATCH 6/9] Lint fixes --- public/editor/stylesheets/editor.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index 6ba630d94..77c72a77d 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -113,6 +113,7 @@ body { #editor-pane-nav-fileview, #filetree-pane-nav-hide { .light-theme-icon-colors; + width: 25px; height: 25px; border-radius: 2px; @@ -320,6 +321,7 @@ body { &:active, &.active { background-color: white; + .icon-container { opacity: 0.7; } @@ -419,6 +421,7 @@ body { // Snippets button #editor-pane-nav-snippets { + .header-button; .light-theme-icon-colors; .dark-theme-icon-colors; From 3a4c2fe2bf096d9e7a13e70cd961b240a68d1621 Mon Sep 17 00:00:00 2001 From: mozilla Date: Mon, 4 Dec 2017 15:40:23 -0800 Subject: [PATCH 7/9] One. Last. Lint. Fix. --- public/editor/stylesheets/editor.less | 1 + 1 file changed, 1 insertion(+) diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index 77c72a77d..79da96e1b 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -430,6 +430,7 @@ body { background-image: url("/img/icon/snippets-black.svg"); background-size: 20px; } + .dark & .icon-container { background-image: url("/img/icon/snippets-white.svg"); } From fc8abb70e84c00d050789baa3335589956d51fbc Mon Sep 17 00:00:00 2001 From: mozilla Date: Tue, 5 Dec 2017 13:07:08 -0800 Subject: [PATCH 8/9] Light theme pane titles are consistent now. --- public/editor/stylesheets/editor.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index 79da96e1b..a9009cd06 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -85,13 +85,13 @@ body { } .filetree-pane-nav-title { - color: black; + color: #a9a9a9; font-weight: 600; font-size: 1em; - opacity: 0.45; .vertical-align; .dark & { + opacity: 0.45; color: white; } } @@ -254,9 +254,8 @@ body { .editor-pane-nav-title { font-weight: bold; - opacity: 0.6; margin-right: 10px; - color: black; + color: #aeaeae; .vertical-align; } @@ -273,6 +272,7 @@ body { .editor-pane-nav-title { color: white; + opacity: 0.6; } #editor-pane-nav-filename { @@ -356,7 +356,8 @@ body { height: 20px; width: auto; - padding: 5px 8px 5px 30px; + padding: 5px 8px 5px 8px; + min-width: 14px; position: relative; .icon-container { @@ -377,6 +378,7 @@ body { top: -1px; opacity: 0.3; color: black; + margin-left: 20px; .transition; } From 51d13f9f3b5cd869e31ca96a506ebd0f9c16c945 Mon Sep 17 00:00:00 2001 From: mozilla Date: Tue, 5 Dec 2017 13:19:58 -0800 Subject: [PATCH 9/9] Lint Fix --- public/editor/stylesheets/editor.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/editor/stylesheets/editor.less b/public/editor/stylesheets/editor.less index a9009cd06..3d249e8c1 100755 --- a/public/editor/stylesheets/editor.less +++ b/public/editor/stylesheets/editor.less @@ -356,7 +356,7 @@ body { height: 20px; width: auto; - padding: 5px 8px 5px 8px; + padding: 5px 8px; min-width: 14px; position: relative;