taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new editor toobar icons

stable
Juanfran 2017-02-01 10:25:12 +01:00
parent 4999b79181
commit 2a02b89cc6
4 changed files with 140 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/index.jade
View File

@ -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

85
app/modules/components/wysiwyg/wysiwyg.directive.coffee
View File

@ -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 = '<b>RTL</b>'
this.button.innerHTML = option.contentDefault || '<b>RTL</b>'
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 """<svg class="icon icon-#{icon}">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="##{icon}"></use>
</svg>"""
# MediumEditor extension to add <code>
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 = '<b>Code</b>'
this.button.innerHTML = option.contentDefault || '<b>Code</b>'
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: {

10
app/modules/components/wysiwyg/wysiwyg.scss
View File

@ -250,6 +250,14 @@ tg-wysiwyg {
}
// Override medium styles
.medium-editor-toolbar li .medium-editor-button-active {
.medium-editor-toolbar {
li .medium-editor-button-active {
color: $primary-light;
}
svg {
fill: $white;
}
button:hover svg {
fill: $primary-light;
}
}

60
app/svg/editor.svg Normal file
View File

@ -0,0 +1,60 @@
<svg height="0" style="position: absolute; width: 0; height: 0;" version="1.1" width="0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="editor-list-o" viewBox="0 0 400 400">
<title>editor-list-o</title>
<path d="M0 87.5v25h59.3v-25H0zm92 0v25h308v-25H92zm-92 100v25h59.3v-25H0zm92 0v25h308v-25H92zm-92 100v25h59.3v-25H0zm92 0v25h308v-25H92z" />
</symbol>
<symbol id="editor-rtl" viewBox="0 0 400 400">
<title>editor-rtl</title>
<path d="M254.4 0v26H297v348h-42.6v26H366v-26h-43V26h43V0H254.3zM128.7 112.6L41.4 200h.2l87.3 87.4 18.3-18.4-56-56h160v-26H91.2l56-56-18.3-18.4z" />
</symbol>
<symbol id="editor-quote" viewBox="0 0 400 400">
<title>editor-quote</title>
<path d="M113-.5v165h54V90.2h-26V-.5h-28zm120 0v165h54V90.2h-26V-.5h-28z" />
</symbol>
<symbol id="editor-list-n" viewBox="0 0 400 400">
<title>editor-list-n</title>
<path d="M23 79.2v22.4h14.4v79.2h26.4V79.2h-41zm109 38.3v25h268v-25H132zM47 215c-8 0-14.7 1.8-20.5 5-6 3.2-10.5 7.8-14 13.7-3 6-5 13-5.2 20.5h29.2c-.3-1.3-.5-2.8-.5-4.3 0-3.8 1-6.7 3-9s4.8-3.5 8-3.5c3.6 0 6.3 1.4 8.4 4 2.2 2.8 3.3 5.8 3.3 9.2 0 8-4 16.4-11.6 25l-41.4 45h81.7v-22.3H54l15.7-14.6c3-3 5.6-5.5 7.7-8 2-2.4 3.7-4.8 5-7 2.5-4.7 3.8-10.6 3.8-17.6 0-5.3-1-10.2-3-14.8-2.3-4.7-5-8.6-8.5-11.4-3.6-3-7.7-5.5-12.5-7.3-4.7-1.7-9.8-2.6-15.2-2.6zm85 40.5v25h268v-25H132z"/>
</symbol>
<symbol id="editor-no-format" viewBox="0 0 400 400">
<title>editor-no-format</title>
<path d="M0 0v25h139.8v375h25V25h140V0H0zm271.4 253L253 271.4l55 55-55 55.2 18.4 18.4 55-55 55.2 55 18.4-18.4-55-55 55-55.2-18.4-18.4-55 55-55.2-55z" />
</symbol>
<symbol id="editor-link" viewBox="0 0 400 400">
<title>editor-link</title>
<path d="M90 0C67 0 44 8.5 26.3 26l-.4.4c-35 35-34.6 92 .6 127.2L94 221c-.4-2-1.2-11.5-1.2-17.5 0-5.8 1.6-13.2 2.4-16.6l-51-51c-25.7-26-26-66.5-.5-92l.4-.3c25.5-25.4 66-25.2 92 .6L238.4 147c25.8 25.7 26 66.3.6 91.7l-.3.4c-7.8 8-13.2 11.8-18.2 13.7-6.7 2.4-10.6 7.7-8 16 3 9 13.3 8 20 5.7 6.5-2.2 14.5-8.2 24-17.6l.3-.4c35-35 34.6-92-.6-127.2L153.6 26.6C136 9 113 0 90 0zM179 123.8h-.2c-15.2 3.8-23.5 7.6-35.4 19.4l-.4.4c-35 35-34.6 92 .6 127.2l102.6 102.6c35.2 35.2 92.2 35.6 127.2.6l.4-.4c35-35 34.6-92-.6-127.2l-70-70c.5 4.7 1.6 12 1.6 18.2 0 6.4-.5 13.6-1.2 17.6l52 52c25.7 25.7 26 66.3.5 91.7l-.4.3c-25.5 25.4-66 25.2-92-.6L161.6 253c-25.8-25.7-26-66.3-.6-91.7l.3-.4c8-8.2 15.4-10.7 21.8-12.5 4-2 10.6-6.4 9.4-14.7-1.3-8.5-9-10-13.2-10z" />
</symbol>
<symbol id="editor-italic" viewBox="0 0 400 400">
<title>editor-italic</title>
<path d="M180 0v30h37l-68 340h-35v30h106v-30h-35l68-340h33V0z" />
</symbol>
<symbol id="editor-image" viewBox="0 0 400 400">
<title>editor-image</title>
<path d="M0 50v300h400V50H0zm25 25h350v250H25V75zm287.4 20.4a26 26 0 0 0-26 26 26 26 0 0 0 26 26 26 26 0 0 0 26-26 26 26 0 0 0-26-26zm-164 31L47 255V295l102.6-129.7L237 263l42.8-60.7 73 68v-34l-77-72-41 58.6-86.4-96.5z" />
</symbol>
<symbol id="editor-h3" viewBox="0 0 400 400">
<title>editor-h3</title>
<path d="M0 47.5v305h27.7V195h166v157.5h27.8v-305h-27.8v123.8h-166V47.5H0zm339.3 140c-21.5 0-42.8 14-49 35-1 3-2 6.5-2.3 9.5 10 0 20 .2 30.2 0 1.3-13.3 16.6-22.4 28.8-17 13.8 5 16.8 25.6 5.6 35-4.3 3.6-10 5.5-15.7 5.5.3 6-1 13.7.5 18.6 16-2.2 32 13.8 28.4 30-2 16-21.4 25-35.8 19.2-8.8-3.3-15.4-11.8-16.4-21-11.5 0-23-.6-34.3.2 3.5 24 23 45.4 47.4 49 21.2 3.4 46-.6 61-17.2 16.4-17.5 15.5-49-4-63.8-3.8-2.7-9-4.7-12.5-6.4 1.4-2 6.2-5 9-8.4 16.6-17.4 11.2-50.8-10.6-61.5-8.7-4.6-18.8-6.6-28.6-6.4h-2z" />
</symbol>
<symbol id="editor-h1" viewBox="0 0 400 400">
<title>editor-h1</title>
<path d="M0 352.5v-305h27.7v123.8h166V47.5h27.8v305h-27.8V195h-166v157.5H0zM373 352.5V195.2h-55l13.3-24.8H400v182z" />
</symbol>
<symbol id="editor-h2" viewBox="0 0 400 400">
<title>editor-h2</title>
<path d="M0 47.5v305h27.7V195h166v157.5h27.8v-305h-27.8v123.8h-166V47.5zm331.5 131.8c-24 0-48.6 14.4-56.6 37.8-2.4 6.8-5.2 15.5-4 21.3 13.2-.2 27.2.7 40.2-.4-1.7-12.7 6.7-27.2 20.3-28.2 14-2 26 11.2 26.3 24.7 1.3 20.6-12 38.3-25.4 52.4-20 22-40.3 43.5-60.3 65.5h127v-30.3h-63c18-19 40.5-33.7 54.4-56 14-25.5 6.2-62-19.6-76.8-11.2-6.8-24-10-37-10h-2.3z" />
</symbol>
<symbol id="editor-cross-out" viewBox="0 0 400 400">
<title>editor-cross-out</title>
<path d="M206.4 0c-28.5 0-51.8 8-70 24.2-19 17-28.6 39.4-28.6 67.3 0 26 10 48.5 30.4 67.4 2.7 2.5 6 5.2 9.7 8h61.5l-.5-.3c-44-23-66-48-66-74.6 0-18.7 5.5-33.5 16.6-44.4 11-11 26-16.7 44.7-16.7 28.3 0 48 11 59.5 33.5l26.8-16C273 16 245 0 206.4 0zm-166 185v30h319v-30h-319zm212.2 48l1.4 1.3c14.4 14.4 21.6 32.5 21.6 54.4 0 24.8-6.5 44.3-19.6 58.5-13.5 14.6-32.5 22-57.2 22-40.2 0-66-19.8-77.7-59.2l-29.6 16c20 49.3 55.4 74 106 74 34.2 0 61.3-10 81.3-30 20-19.8 30-47 30-81.3 0-21.7-4.5-40.2-13-55.7h-43z" />
</symbol>
<symbol id="editor-code" viewBox="0 0 400 400">
<title>editor-code</title>
<path d="M241.5 64.7l-107 260.7 24 10 107-260.8-24-10zM105.7 94.3l-87.3 87.3L0 200l18.4 18.4 87.3 87.3 18.4-18.4L37 200l87.3-87.3-18.3-18.4zm188.6 0L276 112.7 363 200 276 287.3l18.3 18.4 87.3-87.3L400 200l-18.4-18.4-87.3-87.3z" />
</symbol>
<symbol id="editor-bold" viewBox="0 0 400 400">
<title>editor-bold</title>
<path d="M121.3 178h45.4q45 0 65.5-13 25.7-16.4 25.7-58.2 0-44.2-24.4-61.2-20-14-67-14h-45.3V178zm0 190.6h46.5q61.2 0 80-14.5 28.2-21.5 28.2-64 0-50.7-32-69.5-19-11.2-68.3-11.2h-54.4v159.3zM85 400V0h69.4q36.3 0 52 2 30.5 4 48.2 17.4Q295.4 50 295.4 104q0 31.5-16.2 53.7-16.6 23-46.4 30.3 38.5 5.7 60.4 31 21.8 24.7 21.8 63.5 0 56-34 87.7-22.3 20.5-59.7 26.5Q202 400 155 400H85z" />
</symbol>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB