Minz/quicknotes
1
0
Fork 0
mirror of https://github.com/JanGross/quicknotes.git synced 2025-11-30 23:37:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use an custom theme for mediumjs and translate tooltips

Browse Source
This commit is contained in:
Matias De lellis
2020-06-05 20:48:33 -03:00
parent 3ec97060a9
commit 8aa4b74323
3 changed files with 135 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
css/medium.scss Normal file
View File

@@ -0,0 +1,125 @@
// theme settings
$medium-editor-bgcolor: #000;
$medium-editor-button-size: 20px;
$medium-editor-button-active-text-color: #fff;
$medium-editor-hover-color: $medium-editor-bgcolor;
$medium-editor-link-color: #fff;
$medium-editor-border-radius: 8px;
$medium-editor-placeholder-color: #f8f5f3;
// theme rules
.medium-toolbar-arrow-under:after {
border-color: $medium-editor-bgcolor transparent transparent transparent;
top: $medium-editor-button-size;
}
.medium-toolbar-arrow-over:before {
border-color: transparent transparent $medium-editor-bgcolor transparent;
}
.medium-editor-toolbar {
background-color: $medium-editor-bgcolor;
border: none;
border-radius: $medium-editor-border-radius;
li {
button {
background-color: transparent;
border: none;
box-sizing: border-box;
color: $medium-editor-link-color;
height: $medium-editor-button-size;
min-width: $medium-editor-button-size;
padding: 5px 12px;
opacity: 0.6;
transition: background-color .2s ease-in, color .2s ease-in;
&:hover {
background-color: $medium-editor-hover-color;
color: $medium-editor-button-active-text-color;
opacity: 1.0;
}
}
.medium-editor-button-first {
border-bottom-left-radius: $medium-editor-border-radius;
border-top-left-radius: $medium-editor-border-radius;
//padding-left: 24px;
}
.medium-editor-button-last {
border-bottom-right-radius: $medium-editor-border-radius;
border-right: none;
border-top-right-radius: $medium-editor-border-radius;
//padding-right: 24px
}
.medium-editor-button-active {
background-color: $medium-editor-hover-color;
color: $medium-editor-button-active-text-color;
opacity: 1.0;
}
}
}
.medium-editor-toolbar-form {
background: $medium-editor-bgcolor;
border-radius: $medium-editor-border-radius;
color: $medium-editor-link-color;
overflow: hidden;
.medium-editor-toolbar-input {
background: $medium-editor-bgcolor;
box-sizing: border-box;
color: $medium-editor-link-color;
height: $medium-editor-button-size;
padding-left: 16px;
width: 220px;
&::-webkit-input-placeholder {
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
&:-moz-placeholder { /* Firefox 18- */
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
&::-moz-placeholder { /* Firefox 19+ */
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
&:-ms-input-placeholder {
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
}
a {
color: $medium-editor-link-color;
transform: translateY(2px);
}
.medium-editor-toolbar-close {
margin-right: 16px;
}
}
.medium-editor-toolbar-anchor-preview {
background: $medium-editor-bgcolor;
border-radius: $medium-editor-border-radius;
padding: 5px 12px;
}
.medium-editor-anchor-preview {
a {
color: $medium-editor-link-color;
text-decoration: none;
margin: 5px;
font-size: small;
}
}
.medium-editor-toolbar-actions {
li, button {
border-radius: $medium-editor-border-radius;
}
}

17
js/script.js
View File

@@ -243,19 +243,20 @@ View.prototype = {
// Create medium div editor.
var autolist = new AutoList();
var editor = new MediumEditor(modalcontent, {
targetBlank: true,
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'strikethrough',
'unorderedlist','orderedlist',
'quote',
'removeFormat'
{ name: 'bold', aria: t('quicknotes', 'Bold') },
{ name: 'italic', aria: t('quicknotes', 'Italic') },
{ name: 'underline', aria: t('quicknotes', 'Underline') },
{ name: 'strikethrough', aria: t('quicknotes', 'Strikethrough') },
{ name: 'unorderedlist', aria: t('quicknotes', 'Bulleted list') },
{ name: 'orderedlist', aria: t('quicknotes', 'Numbered list') },
{ name: 'quote', aria: t('quicknotes', 'Blockquote') },
{ name: 'removeFormat', aria: t('quicknotes', 'Clean format') }
]
},
autoLink: true,
targetBlank: true,
paste: {
forcePlainText: false,
cleanPastedHTML: false

2
templates/main.php
View File

@@ -4,11 +4,11 @@ script('quicknotes', 'templates');
vendor_script('quicknotes', 'isotope.pkgd');
vendor_script('quicknotes', 'medium-editor');
vendor_style('quicknotes', 'medium-editor');
vendor_style('quicknotes', 'beagle');
vendor_script('quicknotes', 'autolist');
script('quicknotes', 'qn-dialogs');
script('quicknotes', 'script');
style('quicknotes', 'style');
style('quicknotes', 'medium');
?>
<div id="app-navigation">