From 661ebf507436b6ed4d01d5dd758dff322fe659bb Mon Sep 17 00:00:00 2001
From: Alexandros Georgantas <alexgeorg86@gmail.com>
Date: Tue, 21 Mar 2017 15:40:15 +0200
Subject: [PATCH] Side Style menu finalized
---
app/components/SimpleEditor/SimpleEditor.scss | 44 +++++++++++--------
.../LeftSwitchTextTypeTool.js | 21 ++-------
2 files changed, 30 insertions(+), 35 deletions(-)
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index aa420d1..3e51d41 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -82,7 +82,6 @@ $active-blue: #4a90e2;
top: 8px;
}
}
-
.sm-target-text {
// bottom: 5px;
height: 100%;
@@ -90,9 +89,10 @@ $active-blue: #4a90e2;
position: relative;
.sc-switch-text-type {
+ bottom: 5px;
margin-left: 1px;
width: 150px;
- bottom: 5px;
+
button {
color: $transparent-black;
height: inherit;
@@ -234,9 +234,14 @@ $active-blue: #4a90e2;
border-right: 1px solid $light-gray;
margin-top: 1px;
+ .sidenav .sc-toolbar ul li.se-option.active {
+ background-color: #d8d8d8;
+ }
+
.sidenav {
background-color: #e8e8e8;
// box-shadow: 0 0 12px $dark-gray;
+ box-shadow: 2px 0px 1px -1px #ccc;
height: 100%;
left: 0;
margin-top: 149px;
@@ -245,23 +250,30 @@ $active-blue: #4a90e2;
top: 0;
width: 140px;
z-index: 1;
- .sc-toolbar {
- border: 0;
- .sc-tool-group {
- background-color: #ccc;
- .se-toggle:after {
- display: none;
+
+ .sc-toolbar {
+ background: transparent;
+ border: 0;
+
+ ul {
+ margin: 0;
+ padding: 0;
+
+ li.se-option {
+ padding: 3px;
+ }
+ }
+
+ .sc-switch-text-type {
+ bottom: 0px;
+ margin: 0;
+ padding: 0;
+ width: 140px;
}
- }
- .se-options button {
- text-align: left;
- outline: none;
}
}
-}
}
-
div.se-content {
color: $transparent-black;
font-family: 'Fira Sans';
@@ -337,8 +349,4 @@ $active-blue: #4a90e2;
flex-wrap: wrap;
margin-left: 8%;
}
-
- .sc-switch-text-type .active {
- color: green
- }
}
diff --git a/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js b/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js
index 67ce050..e40bb0b 100644
--- a/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js
+++ b/app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js
@@ -1,31 +1,20 @@
-import { forEach, Tool, keys } from 'substance'
+import { forEach, Tool } from 'substance'
class LeftSwitchTextTypeTool extends Tool {
constructor (...args) {
super(...args)
- // console.log('this', this)
let text = this.context.editorSession.configurator.config.textTypes
this.extendProps({textTypes: text})
- // let text = this.context.editorSession.configurator.config.textTypes
- // console.log('text', text)
}
- // UI Specific parts
- // ----------------
didMount (...args) {
super.didMount(...args)
- // this._focusToggle()
}
render ($$) {
- console.log('render')
let labelProvider = this.context.labelProvider
let el = $$('ul').addClass('sc-switch-text-type')
- console.log('current', this.props.currentTextType)
- // if (this.props.disabled || !this.props.currentTextType) {
- // el.addClass('sm-disabled')
- // }
forEach(this.props.textTypes, function (textType) {
let item = $$('li')
@@ -41,12 +30,12 @@ class LeftSwitchTextTypeTool extends Tool {
el.append(item)
}.bind(this))
+ if (this.props.disabled) {
+ el.addClass('sm-disabled')
+ }
return el
}
- didUpdate () {
- }
-
executeCommand (textType) {
this.context.commandManager.executeCommand(this.getCommandName(), {
textType: textType
@@ -55,8 +44,6 @@ class LeftSwitchTextTypeTool extends Tool {
handleClick (e) {
e.preventDefault()
- // Modifies the tool's state so that state.open is undefined, which is nice
- // because it means the dropdown will be closed automatically
this.executeCommand(e.currentTarget.dataset.type)
}
--
GitLab