Commit 661d8193 authored by chris's avatar chris

choose action drop down

parent 125945db
......@@ -10,15 +10,5 @@ export default {
commandGroup: 'change-case',
})
config.addTool('change-case', ChangeCaseTool)
config.addIcon('change-case', { fontawesome: 'fa-code' })
// config.addLabel('change-case', {
// en: 'uppercase',
// })
// let controllerKey = 'ctrl'
// if (platform.isMac) controllerKey = 'cmd'
//
// config.addKeyboardShortcut(`${controllerKey}+d`, {
// command: 'code',
// })
},
}
import { forEach } from 'lodash'
import { Tool, FontAwesomeIcon as Icon, documentHelpers } from 'substance'
class ChangeCaseTool extends Tool {
constructor(...args) {
super(...args)
this.DropDownOptions = [
{ name: 'Upper case', code: '#fdf47D' },
{ name: 'Lower case', code: '#befdc4' },
{ name: 'blue', code: '#c5fff9' },
{ name: 'Upper case', action: 'uppercase' },
{ name: 'Lower case', action: 'lowerase' },
{ name: 'Sentence case', action: 'sentencecase' },
{ name: 'Title case', action: 'titlecase' },
]
console.log('fjfjffjfjfjfj')
}
render($$) {
const dropDownCarret = $$(Icon, { icon: 'fa-caret-down' }).addClass(
'icon-down',
)
let el = $$('div')
.addClass('change-case-wrapper')
.append(
$$('div')
.addClass('choose-case')
.attr('title', `Change Case Action`)
.append('Choose Action')
.append(dropDownCarret)
.on('click', this.toggleDropdown),
)
if (this.state.open) {
el.addClass('sm-open')
// dropdown options
let options = $$('div')
.addClass('se-options')
.ref('options')
forEach(this.DropDownOptions, (option, index) => {
let button = $$('button')
.addClass('se-option sm-' + option.name)
.attr('data-type', option)
.append(
$$('div')
.append(option.name)
.addClass('option-box')
.attr('title', `Add ${option.name} highlighting`),
)
.on('click', () => this.addHighLighting(option.name))
options.append(button)
})
el.append(options)
}
return el
}
toggleDropdown() {
this.extendState({
open: !this.state.open,
})
}
getInitialState() {
return {
open: false,
}
}
}
......
.change-case-wrapper {
width: 110px;
font-size: 12px;
.choose-case {
margin-top: 5px;
cursor: pointer;
}
i {
margin-left: 10px;
}
&.sm-open {
div:first-child {
background: #4990e2;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fff;
padding: 3px;
}
}
.se-options {
width: 110px;
position: fixed;
z-index: 99999;
background-color: #4990e2;
border: 1px solid #ccc;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 5px 0px 5px 0px;
}
button {
font-size: 13px;
display: block;
background: none;
border: none;
color: #fff;
margin-top: 5px;
padding-left: 1px;
cursor: pointer;
&:hover {
font-weight: 600;
}
}
}
......@@ -14,3 +14,4 @@
@import './track_change/trackChange';
@import './notification/notification';
@import './change_case/changecase';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment