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..3d249e8c1 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,91 +69,142 @@ body {
overflow: hidden;
}
-/* ------ FILETREE PANE ------ */
+// Header bar above FILES pane
.filetree-pane-nav {
top: 0;
left: 0;
z-index: 2;
height: @toolbarHeight;
- background-color: #212121;
vertical-align: top;
float: left;
overflow: hidden;
+ .nav-container {
+ box-sizing: border-box;
+ border-right: solid 1px #ccc;
+ }
+
+ .filetree-pane-nav-title {
+ color: #a9a9a9;
+ font-weight: 600;
+ font-size: 1em;
+ .vertical-align;
+
+ .dark & {
+ opacity: 0.45;
+ color: white;
+ }
+ }
+
+ .dark & {
+ background-color: #212121;
+
+ .nav-container {
+ border: none;
+ }
+ }
+
.narrow {
display: none;
}
}
-.filetree-pane-nav-title {
- color: white;
- font-weight: 600;
- font-size: 1em;
- opacity: 0.45;
- filter: alpha(opacity=45);
- .vertical-align;
-}
-
-.filetree-pane-nav-btn {
- width: 100%;
- height: 100%;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 10px 10px;
-}
+// Shared styles for icons that show & hide the file view
+#editor-pane-nav-fileview,
+#filetree-pane-nav-hide {
+ .light-theme-icon-colors;
-#filetree-pane-nav-add {
width: 25px;
height: 25px;
- background-color: @buttonGreen;
- margin-right: 5px;
- border-radius: 1px;
- .icon;
- .transition;
+ border-radius: 2px;
+ cursor: pointer;
- div {
- background-image: url("/img/icon/file-white.svg");
- background-size: 13px 15px;
+ .icon-container {
+ width: 100%;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 10px 10px;
}
+}
- &:hover {
- background-color: @buttonGreenHover;
+// Show filetree button
+#editor-pane-nav-fileview {
+ margin-right: 10px;
+
+ .icon-container {
+ background-image: url("/img/icon/file-tray-arrow-right-black.svg");
}
- &:active {
- background-color: @buttonGreenActive;
+ .dark & {
+ background-color: #2b2b2b;
+
+ .icon-container {
+ background-image: url("/img/icon/file-tray-arrow-right-white.svg");
+ opacity: 0.2;
+ }
+
+ &:hover {
+ .icon-container {
+ opacity: 0.4;
+ }
+ }
+
+ &:active {
+ background-color: #1b1b1b;
+ }
}
}
+// Hide filetree button
#filetree-pane-nav-hide {
+ .icon-container {
+ background-image: url("/img/icon/file-tray-arrow-left-black.svg");
+ }
+
+ .dark & {
+ background-color: #3f3f3f;
+
+ &:hover {
+ background-color: #585858;
+ }
+
+ &:active {
+ .icon-container {
+ opacity: 0.7;
+ }
+ }
+ }
+}
+
+// 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;
@@ -179,8 +229,6 @@ body {
&:hover {
background-color: rgba(0, 0, 0, 0.05);
}
-
- .icon;
}
.top-border {
@@ -189,14 +237,14 @@ body {
}
}
-/* ------ LEFT PANE ------ */
+// Header above Editor pane
.editor-pane-nav {
top: 0;
width: 50%;
z-index: 2;
height: @toolbarHeight;
- background-color: #3f3f3f;
- color: #757575;
+ border-right: solid 1px #bbb;
+ color: black;
float: left;
overflow: hidden;
@@ -205,166 +253,192 @@ body {
}
.editor-pane-nav-title {
- color: white;
- font-weight: 600;
- opacity: 0.45;
- filter: alpha(opacity=45);
+ font-weight: bold;
margin-right: 10px;
+ color: #aeaeae;
.vertical-align;
}
#editor-pane-nav-filename {
margin-right: 10px;
font-weight: 600;
+ opacity: 0.3;
+ }
+
+ .dark & {
+ color: #757575;
+ background-color: #3f3f3f;
+ border: none;
+
+ .editor-pane-nav-title {
+ color: white;
+ opacity: 0.6;
+ }
+
+ #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: 0.3;
+ transition: opacity @transitionTime ease-out;
}
- &:active {
- background-color: #1b1b1b;
+ &:hover {
+ .icon-container {
+ opacity: 0.5;
+ }
+ }
+
+ &:active,
+ &.active {
+ background-color: white;
+
+ .icon-container {
+ opacity: 0.7;
+ }
+ }
+}
+
+// Dark theme for header icons
+.dark-theme-icon-colors {
+ .dark & {
+ background-color: #2b2b2b;
+
+ &:hover .icon-container {
+ opacity: 0.5;
+ }
+
+ &:active,
+ &.active {
+ background-color: #1b1b1b;
+
+ .icon-container {
+ opacity: 0.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;
+ min-width: 14px;
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: 0.3;
+ color: black;
+ margin-left: 20px;
.transition;
}
- &:hover {
- img {
- opacity: 0.7;
- filter: alpha(opacity=70);
- }
+ &:hover span {
+ opacity: 0.5;
+ }
- span {
- opacity: 0.7;
- filter: alpha(opacity=70);
- }
+ &:active span {
+ opacity: 0.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;
- }
-
- &:hover {
- img {
- opacity: 0.7;
- filter: alpha(opacity=70);
- }
+ .icon-container {
+ background-image: url("/img/icon/redo-black.svg");
+ background-size: 15px;
}
- &: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: #2b2b2b;
- height: 30px;
- width: 30px;
- text-align: center;
- border-radius: 50%;
- margin-left: 6px;
- position: relative;
- .icon;
- img {
- opacity: 0.5;
- height: 20px;
- width: 20px;
- position: absolute;
- top: 5px;
- left: 5px;
+ .header-button;
+ .light-theme-icon-colors;
+ .dark-theme-icon-colors;
+
+ .icon-container {
+ background-image: url("/img/icon/snippets-black.svg");
+ background-size: 20px;
}
- &:hover img {
- opacity: 0.7;
+ .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;
@@ -450,8 +524,6 @@ body {
&.selected {
background-color: rgba(0, 0, 0, 0.1);
}
-
- .icon;
}
.top-border {
@@ -485,36 +557,53 @@ 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: 0.3;
padding: 4px;
- .transition;
+ transition: opacity @transitionTime ease-out;
+ cursor: pointer;
- margin-left: 6px;
+ &:hover {
+ opacity: 0.5;
+ }
- .icon;
+ &:active,
+ &.active {
+ opacity: 0.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: 0.5;
+
+ .icon-container {
+ background-image: url("/img/icon/gear-white.svg");
+ }
+
+ &:hover {
+ opacity: 0.7;
+ }
+
+ &:active,
+ &.active {
+ opacity: 0.8;
+ }
+ }
+
+ margin-left: 6px;
}
-/* ------ EDITOR OPTIONS MENU ------ */
+// Settings (gear) menu
#editor-pane-nav-options-menu {
position: absolute;
z-index: 151;
@@ -549,7 +638,7 @@ body {
}
}
-.arrow-tip {
+.bramble-toolbar .arrow-tip {
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
@@ -561,7 +650,7 @@ body {
left: calc(~"50% - 11px");
}
-// Line wrap toggle
+// Switch toggle for editor settings
#editor-pane-nav-options-menu {
.switch-toggle {
position: absolute;
@@ -603,7 +692,7 @@ body {
border-radius: 15px;
top: 0;
left: 0;
- transition: left 0.1s ease-out;
+ transition: left ease-out;
}
.toggle-backing {
@@ -630,7 +719,7 @@ body {
}
}
-/* Font increase/decrease */
+// Text Size UI
.text-size-ui {
position: absolute;
right: 18px;
@@ -656,7 +745,6 @@ body {
color: white;
font-size: 1.2em;
display: inline-block;
- .icon;
.transition;
&:hover {
@@ -669,7 +757,7 @@ body {
}
}
-/* Theme toggle*/
+// Theme Toggle
#editor-pane-nav-toggle-theme {
margin-left: auto;
background-color: #55986c;
@@ -724,7 +812,7 @@ body {
}
}
-/* ------ RIGHT PANE ------ */
+// Header above Preview pane
.preview-tutorial-toggle {
.preview-pane-nav-title {
padding-bottom: 1px;
@@ -767,6 +855,7 @@ body {
padding: 5px;
border-radius: 50%;
border: solid 2px #eaeaea;
+ cursor: pointer;
&.spin img {
animation: spin 0.25s ease-out;
@@ -782,7 +871,6 @@ body {
left: -1px;
.transition;
}
- .icon;
&:hover {
img {
@@ -877,7 +965,6 @@ body {
position: absolute;
height: @toolbarHeight;
z-index: 2;
- background-color: #eaeaea;
float: right;
overflow: hidden;
@@ -902,6 +989,7 @@ body {
border-radius: 50%;
position: relative;
margin-left: 6px;
+ cursor: pointer;
.icon-wrapper {
position: absolute;
@@ -933,8 +1021,6 @@ body {
opacity: 1;
}
}
-
- .icon;
}
.preview-device-toggle {
@@ -942,6 +1028,7 @@ body {
border-radius: 30px;
height: 30px;
margin-left: 6px;
+ cursor: pointer;
img {
width: 20px;
@@ -953,8 +1040,6 @@ body {
}
#preview-pane-nav-desktop {
- .icon;
-
margin-left: 13px;
}
@@ -963,8 +1048,6 @@ body {
}
#preview-pane-nav-phone {
- .icon;
-
margin: 0 10px 0 4px;
}
@@ -1025,13 +1108,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;
@@ -1192,7 +1268,6 @@ body {
width: 98px;
height: 52px;
padding: 4px;
- background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
box-sizing: border-box;
@@ -1244,7 +1319,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-black.svg
similarity index 100%
rename from public/resources/img/icon/file-tray-arrow-left.svg
rename to public/resources/img/icon/file-tray-arrow-left-black.svg
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 @@
+
+
\ 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 @@
+
+
\ 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-white.svg
similarity index 100%
rename from public/resources/img/icon/file-tray-arrow-right.svg
rename to public/resources/img/icon/file-tray-arrow-right-white.svg
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 @@
-
-
-
-
+
+
\ 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 @@
+
\ 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 @@
+
\ 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 @@
+
+
\ No newline at end of file
diff --git a/public/resources/img/icon/redo.svg b/public/resources/img/icon/redo-white.svg
similarity index 100%
rename from public/resources/img/icon/redo.svg
rename to public/resources/img/icon/redo-white.svg
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.svg b/public/resources/img/icon/snippets-white.svg
similarity index 100%
rename from public/resources/img/icon/snippets.svg
rename to public/resources/img/icon/snippets-white.svg
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 @@
+
+
\ No newline at end of file
diff --git a/public/resources/img/icon/undo.svg b/public/resources/img/icon/undo-white.svg
similarity index 100%
rename from public/resources/img/icon/undo.svg
rename to public/resources/img/icon/undo-white.svg
diff --git a/views/editor/nav-options.html b/views/editor/nav-options.html
index 5a755cec9..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") }}
-
+
-
+
+
+