Merge pull request #493 from sharelatex/as-editor-toolbar

Add toggle switch directive to editor toolbar

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",

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
@@ -187,6 +188,3 @@ define [
 						@$scope.editor.trackChanges = want
 				else
 					@_syncTimeout = setTimeout tryToggle, 100
-
-		toggleRichText: () ->
-			@$scope.editor.richText = !@$scope.editor.richText

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: """
+  <fieldset class="toggle-switch">
+    <legend class="sr-only">{{description}}</legend>
+
+    <input
+      type="radio"
+      name="editor-mode"
+      class="toggle-switch-input"
+      id="toggle-switch-false-{{$id}}"
+      ng-value="false"
+      ng-model="ngModel"
+    >
+    <label for="toggle-switch-false-{{$id}}" class="toggle-switch-label">{{labelFalse}}</label>
+
+    <input
+      type="radio"
+      class="toggle-switch-input"
+      name="editor-mode"
+      id="toggle-switch-true-{{$id}}"
+      ng-value="true"
+      ng-model="ngModel"
+    >
+    <label for="toggle-switch-true-{{$id}}" class="toggle-switch-label">{{labelTrue}}</label>
+
+    <span class="toggle-switch-selection" aria-hidden="true"></span>
+  </fieldset>
+"""

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 {

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;
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -932,6 +932,14 @@
 @synctex-controls-z-index         : 3;
 @synctex-controls-padding         : 0 2px;
 
+// Editor toolbar
+@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;

services/web/public/stylesheets/core/ol-variables.less

@@ -235,6 +235,15 @@
 @synctex-controls-padding         : 0;
 @editor-border-color              : @ol-blue-gray-5;
 
+// 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;