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 ColorPick libary to select color. This just to avoid overflow between the buttons

Browse Source
This commit is contained in:
Matias De lellis
2020-06-17 14:48:20 -03:00
parent 457de941fe
commit 217e3d868f
5 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Makefile
View File

@@ -65,6 +65,8 @@ deps:
cp node_modules/medium-editor/dist/css/medium-editor.css vendor/
cp node_modules/medium-editor-autolist/dist/autolist.js vendor/
cp node_modules/lozad/dist/lozad.js vendor/
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
depsmin:
mkdir -p vendor
@@ -76,6 +78,8 @@ depsmin:
cp node_modules/medium-editor/dist/css/medium-editor.min.css vendor/medium-editor.css
cp node_modules/medium-editor-autolist/dist/autolist.min.js vendor/autolist.js
cp node_modules/lozad/dist/lozad.min.js vendor/lozad.js
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
js-templates:
node_modules/handlebars/bin/handlebars js/templates -f js/templates.js

18
css/style.scss
View File

@@ -140,9 +140,9 @@
.colors-toolbar {
float: left;
padding-top: 10px;
}
.colorPickButton,
.circle-toolbar {
display:inline-block;
width:20px;
@@ -361,3 +361,19 @@ div.select2-container {
padding: 0px;
border-radius: 50%;
}
/* Color Picker */
#colorPick {
border-radius: 8px;
padding: 12px;
background-color: var(--color-background-dark);
opacity: 1.0 !important;
z-index: 2500;
}
#colorPick span {
color: var(--color-main-text);
font-size: 13px;
text-transform: initial;
}

24
js/script.js
View File

@@ -500,13 +500,6 @@ View.prototype = {
self._editablePinned(false);
});
// Handle colors.
$('#modal-note-div .circle-toolbar').click(function (event) {
event.stopPropagation();
var color = self._colorToHex($(this).css("background-color"));
self._editableColor(color);
});
// Handle tags on modal
$('#modal-note-div').on('click', '.slim-tag', function (event) {
event.stopPropagation();
@@ -837,17 +830,16 @@ View.prototype = {
if (color === undefined)
return this._colorToHex($("#modal-note-div .quicknote").css("background-color"));
else {
var self = this;
var colors = $("#modal-note-div .quicknote")[0].getElementsByClassName("circle-toolbar");
$.each(colors, function(i, c) {
$(c).removeClass('icon-checkmark');
});
$.each(colors, function(i, c) {
if (color === self._colorToHex(c.style.backgroundColor)) {
c.className += " icon-checkmark";
$("#color-button").colorPick({
'initialColor': color,
'paletteLabel': t('quicknotes', 'Colors'),
'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'],
'allowRecent': false,
'allowCustomColor': false,
'onColorSelected': function() {
$("#modal-note-div .quicknote").css("background-color", this.color);
}
});
$("#modal-note-div .quicknote").css("background-color", color);
}
},
_editableShares: function(shared_with, shared_by) {

23
js/templates/notes.handlebars
View File

@@ -69,27 +69,20 @@
<select class="note-share-select" name="users[]" multiple="multiple"></select>
-->
<div class="colors-toolbar">
<a href="#" class="circle-toolbar" style="background-color: #F7EB96"></a>
<a href="#" class="circle-toolbar" style="background-color: #88B7E3"></a>
<a href="#" class="circle-toolbar" style="background-color: #C1ECB0"></a>
<a href="#" class="circle-toolbar" style="background-color: #BFA6E9"></a>
<a href="#" class="circle-toolbar" style="background-color: #DAF188"></a>
<a href="#" class="circle-toolbar" style="background-color: #FF96AC"></a>
<a href="#" class="circle-toolbar" style="background-color: #FCF66F"></a>
<a href="#" class="circle-toolbar" style="background-color: #F2F1EF"></a>
<a href="#" class="circle-toolbar" style="background-color: #C1D756"></a>
<a href="#" class="circle-toolbar" style="background-color: #CECECE"></a>
</div>
<div class="buttons-toolbar">
<button id='color-button' class='round-tool-button'>
<div class="icon-toggle-background" title="{{t "quicknotes" "Colors"}}"></div>
</button>
<button id='share-button' class='round-tool-button'>
<div class="icon-shared" title="{{t "quicknotes" "Share note"}}"></div>
</button>
<button id='attach-button' class='round-tool-button'>
<div class="icon-picture" title="{{t "quicknotes" "Attach file"}}"></div>
</button>
<button id='tag-button' class='round-tool-button'>
<div class="icon-tag" title="{{t "quicknotes" "Tags"}}"></div>
</button>
<button id='attach-button' class='round-tool-button'>
<div class="icon-picture" title="{{t "quicknotes" "Attach file"}}"></div>
</button>
</div>
<div class="buttons-toolbar">
<button id='cancel-button'>
{{ cancelTxt }}
</button>

2
templates/main.php
View File

@@ -6,6 +6,8 @@ vendor_script('quicknotes', 'medium-editor');
vendor_style('quicknotes', 'medium-editor');
vendor_script('quicknotes', 'autolist');
vendor_script('quicknotes', 'lozad');
vendor_script('quicknotes', 'colorPick');
vendor_style('quicknotes', 'colorPick');
script('quicknotes', 'qn-dialogs');
script('quicknotes', 'script');
style('quicknotes', 'style');