From c87cb1d361b05136ed4d26cafc2ddd2cc3527c21 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Thu, 12 Apr 2018 13:46:19 +0100 Subject: [PATCH 1/5] Basic styles for editor toolbar --- services/web/app/views/project/editor/editor.pug | 2 +- services/web/public/stylesheets/app/editor.less | 7 ++++++- .../web/public/stylesheets/core/_common-variables.less | 4 ++++ services/web/public/stylesheets/core/ol-variables.less | 3 +++ 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index b1570fa55d..fed1889d79 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -39,7 +39,7 @@ div.full-size( ace-editor="editor", ng-if="!editor.richText", ng-show="!!editor.sharejs_doc && !editor.opening", - style=showRichText ? "top: 40px" : "", + style=showRichText ? "top: 32px" : "", theme="settings.theme", keybindings="settings.mode", font-size="settings.fontSize", diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 0936baee1b..46a35c440f 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -81,7 +81,12 @@ } #editor-rich-text { - top: 40px; // TODO: replace with toolbar height var + top: @editor-toolbar-height; +} + +.toolbar-editor { + height: @editor-toolbar-height; + background-color: @editor-toolbar-bg; } .loading-screen { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index ff25eaf25c..e9062caeff 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -932,6 +932,10 @@ @synctex-controls-z-index : 3; @synctex-controls-padding : 0 2px; +// Editor toolbar +@editor-toolbar-height : 32px; +@editor-toolbar-bg : #fff; + // Chat @chat-bg : transparent; @chat-message-color : @text-color; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index b232367338..49d701c5f1 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -235,6 +235,9 @@ @synctex-controls-padding : 0; @editor-border-color : @ol-blue-gray-5; +// Editor toolbar +@editor-toolbar-bg : @ol-blue-gray-5; + // Chat @chat-bg : @ol-blue-gray-5; @chat-message-color : #FFF; From 591f341f5fce8ed4d9046a19d92474f9b97f2607 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 16 Apr 2018 09:36:10 +0100 Subject: [PATCH 2/5] Add switch-toggle directive --- .../coffee/ide/editor/EditorManager.coffee | 1 + .../ide/editor/directives/toggleSwitch.coffee | 37 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee diff --git a/services/web/public/coffee/ide/editor/EditorManager.coffee b/services/web/public/coffee/ide/editor/EditorManager.coffee index b2b954eaf9..a10a499bc2 100644 --- a/services/web/public/coffee/ide/editor/EditorManager.coffee +++ b/services/web/public/coffee/ide/editor/EditorManager.coffee @@ -1,6 +1,7 @@ define [ "ide/editor/Document" "ide/editor/directives/aceEditor" + "ide/editor/directives/toggleSwitch" "ide/editor/controllers/SavingNotificationController" ], (Document) -> class EditorManager diff --git a/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee b/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee new file mode 100644 index 0000000000..afdc36fc64 --- /dev/null +++ b/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee @@ -0,0 +1,37 @@ +define [ + "base" +], (App) -> + App.directive "toggleSwitch", () -> + restrict: "E" + scope: + description: "@" + labelFalse: "@" + labelTrue: "@" + ngModel: "=" + template: """ +
+ {{description}} + + + + + + + + +
+""" From a8c6ac1367d8c2121634d9cf4dd8139a811ab137 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 16 Apr 2018 09:36:32 +0100 Subject: [PATCH 3/5] Style toggle switch --- .../stylesheets/app/editor/toolbar.less | 58 +++++++++++++++++++ .../stylesheets/core/_common-variables.less | 4 ++ .../public/stylesheets/core/ol-variables.less | 6 ++ 3 files changed, 68 insertions(+) diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 3175aa3b29..a73f46abc3 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -183,3 +183,61 @@ } } } + +.toggle-wrapper { + width: 200px; + height: 24px; +} + +.toggle-switch { + position: relative; + height: 100%; + width: 100%; + background-color: @toggle-switch-bg; + border-radius: @btn-border-radius-base; +} + +.toggle-switch-label { + position: relative; + display: block; + font-weight: normal; + z-index: 2; + float: left; + width: 50%; + height: 100%; + line-height: 24px; + text-align: center; + margin-bottom: 0; + cursor: pointer; + user-select: none; + transition: color 0.12s ease-out; +} + +.toggle-switch-input { + position: absolute; + opacity: 0; +} + +.toggle-switch-input:checked + .toggle-switch-label { + color: #fff; + font-weight: bold; +} + +.toggle-switch-selection { + display: block; + position: absolute; + z-index: 1; + top: 2px; + left: 2px; + right: 2px; + width: calc(~"50% - 2px"); + height: calc(~"100% - 4px"); + background: @toggle-switch-highlight-color; + border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base; + transition: transform 0.12s ease-out, border-radius 0.12s ease-out; +} + +.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection { + transform: translate(100%); + border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0; +} diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index e9062caeff..9cb074c754 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -936,6 +936,10 @@ @editor-toolbar-height : 32px; @editor-toolbar-bg : #fff; +// Toggle switch +@toggle-switch-bg : @gray-lightest; +@toggle-switch-highlight-color : @brand-primary; + // Chat @chat-bg : transparent; @chat-message-color : @text-color; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 49d701c5f1..e9125e0143 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -238,6 +238,12 @@ // Editor toolbar @editor-toolbar-bg : @ol-blue-gray-5; +// Toggle switch +@toggle-switch-bg : @ol-blue-gray-1; +@toggle-switch-highlight-color : @ol-green; +@toggle-switch-radius-left : @btn-border-radius-base 0 0 @btn-border-radius-base; +@toggle-switch-radius-right : 0 @btn-border-radius-base @btn-border-radius-base 0; + // Chat @chat-bg : @ol-blue-gray-5; @chat-message-color : #FFF; From 0f70d526d916bb9121918fdcc70d9f55b23fa2fc Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 16 Apr 2018 09:42:26 +0100 Subject: [PATCH 4/5] Remove unused toggleRichText method --- services/web/public/coffee/ide/editor/EditorManager.coffee | 3 --- 1 file changed, 3 deletions(-) diff --git a/services/web/public/coffee/ide/editor/EditorManager.coffee b/services/web/public/coffee/ide/editor/EditorManager.coffee index a10a499bc2..72bbe8509a 100644 --- a/services/web/public/coffee/ide/editor/EditorManager.coffee +++ b/services/web/public/coffee/ide/editor/EditorManager.coffee @@ -188,6 +188,3 @@ define [ @$scope.editor.trackChanges = want else @_syncTimeout = setTimeout tryToggle, 100 - - toggleRichText: () -> - @$scope.editor.richText = !@$scope.editor.richText From 4a12754d904abbb035c7365fb7508420b163eb0f Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 16 Apr 2018 10:07:46 +0100 Subject: [PATCH 5/5] Mark visible toggle switch as hidden from screen readers --- .../web/public/coffee/ide/editor/directives/toggleSwitch.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee b/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee index afdc36fc64..095be6dc1e 100644 --- a/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee +++ b/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee @@ -32,6 +32,6 @@ define [ > - + """