mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-04 14:26:38 +00:00
Merge pull request #493 from sharelatex/as-editor-toolbar
Add toggle switch directive to editor toolbar
This commit is contained in:
Alasdair Smith
GitHub
commit
b0349af21d
7 changed files with 120 additions and 5 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
"""
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue