diff --git a/app/index.jade b/app/index.jade
index 7ba7bb63..ae7d1734 100644
--- a/app/index.jade
+++ b/app/index.jade
@@ -51,3 +51,4 @@ html(lang="en")
script(src="/#{v}/js/templates.js")
script(src="/#{v}/js/app-loader.js")
include svg/sprite.svg
+ include svg/editor.svg
diff --git a/app/modules/components/wysiwyg/wysiwyg.directive.coffee b/app/modules/components/wysiwyg/wysiwyg.directive.coffee
index df1c8bc2..738cb508 100644
--- a/app/modules/components/wysiwyg/wysiwyg.directive.coffee
+++ b/app/modules/components/wysiwyg/wysiwyg.directive.coffee
@@ -60,9 +60,12 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
AlignRightButton = MediumEditor.extensions.button.extend({
name: 'rtl',
init: () ->
+ option = _.find this.base.options.toolbar.buttons, (it) ->
+ it.name == 'rtl'
+
this.button = this.document.createElement('button')
this.button.classList.add('medium-editor-action')
- this.button.innerHTML = 'RTL'
+ this.button.innerHTML = option.contentDefault || 'RTL'
this.button.title = 'RTL'
this.on(this.button, 'click', this.handleClick.bind(this))
@@ -73,13 +76,21 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
})
+ getIcon = (icon) ->
+ return """"""
+
# MediumEditor extension to add
CodeButton = MediumEditor.extensions.button.extend({
name: 'code',
init: () ->
+ option = _.find this.base.options.toolbar.buttons, (it) ->
+ it.name == 'code'
+
this.button = this.document.createElement('button')
this.button.classList.add('medium-editor-action')
- this.button.innerHTML = 'Code'
+ this.button.innerHTML = option.contentDefault || 'Code'
this.button.title = 'Code'
this.on(this.button, 'click', this.handleClick.bind(this))
@@ -299,20 +310,62 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
},
toolbar: {
buttons: [
- 'bold',
- 'italic',
- 'strikethrough',
- 'anchor',
- 'image',
- 'orderedlist',
- 'unorderedlist',
- 'h1',
- 'h2',
- 'h3',
- 'quote',
- 'removeFormat',
- 'rtl',
- 'code'
+ {
+ name: 'bold',
+ contentDefault: getIcon('editor-bold')
+ },
+ {
+ name: 'italic',
+ contentDefault: getIcon('editor-italic')
+ },
+ {
+ name: 'strikethrough',
+ contentDefault: getIcon('editor-cross-out')
+ },
+ {
+ name: 'anchor',
+ contentDefault: getIcon('editor-link')
+ },
+ {
+ name: 'image',
+ contentDefault: getIcon('editor-image')
+ },
+ {
+ name: 'orderedlist',
+ contentDefault: getIcon('editor-list-n')
+ },
+ {
+ name: 'unorderedlist',
+ contentDefault: getIcon('editor-list-o')
+ },
+ {
+ name: 'h1',
+ contentDefault: getIcon('editor-h1')
+ },
+ {
+ name: 'h2',
+ contentDefault: getIcon('editor-h2')
+ },
+ {
+ name: 'h3',
+ contentDefault: getIcon('editor-h3')
+ },
+ {
+ name: 'quote',
+ contentDefault: getIcon('editor-quote')
+ },
+ {
+ name: 'removeFormat',
+ contentDefault: getIcon('editor-no-format')
+ },
+ {
+ name: 'rtl',
+ contentDefault: getIcon('editor-rtl')
+ },
+ {
+ name: 'code',
+ contentDefault: getIcon('editor-code')
+ }
]
},
extensions: {
diff --git a/app/modules/components/wysiwyg/wysiwyg.scss b/app/modules/components/wysiwyg/wysiwyg.scss
index 2f10c1bc..fa4a822a 100644
--- a/app/modules/components/wysiwyg/wysiwyg.scss
+++ b/app/modules/components/wysiwyg/wysiwyg.scss
@@ -250,6 +250,14 @@ tg-wysiwyg {
}
// Override medium styles
-.medium-editor-toolbar li .medium-editor-button-active {
- color: $primary-light;
+.medium-editor-toolbar {
+ li .medium-editor-button-active {
+ color: $primary-light;
+ }
+ svg {
+ fill: $white;
+ }
+ button:hover svg {
+ fill: $primary-light;
+ }
}
diff --git a/app/svg/editor.svg b/app/svg/editor.svg
new file mode 100644
index 00000000..352ac011
--- /dev/null
+++ b/app/svg/editor.svg
@@ -0,0 +1,60 @@
+