From fcee24a61db3013408b4dca67bcf17a36fcaa2fd Mon Sep 17 00:00:00 2001 From: Max G Date: Mon, 29 Jul 2019 07:22:47 +0000 Subject: [PATCH] Added a night mode and no way to toggle it! Tweaked a lot of styles and added some cool animations Added a little to the help text Quickly adding a note, saving and closing no longer causes half formed or empty notes to appear Close Editor animation Display cards text show at the bottom of card Added a delete function, and it works Added browser title attributes More debugging and error checking on scraped links Updated not search to display title and text below the title --- client/src/assets/semantic-helper.css | 100 +++++++++- .../src/components/DeleteButtonComponent.vue | 40 ++++ client/src/components/HelpPage.vue | 3 + client/src/components/InputNotes.vue | 185 ++++++++++-------- .../src/components/NoteTitleDisplayCard.vue | 77 +++++++- client/src/components/Notes.vue | 2 +- client/src/components/SearchBar.vue | 13 +- client/src/main.js | 8 + client/src/router/index.js | 4 + client/src/stores/mainStore.js | 2 - server/models/Attachment.js | 11 +- server/models/Notes.js | 42 +++- server/routes/notesController.js | 5 + 13 files changed, 387 insertions(+), 105 deletions(-) create mode 100644 client/src/components/DeleteButtonComponent.vue diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css index 4d0b25e..2aaeb4f 100644 --- a/client/src/assets/semantic-helper.css +++ b/client/src/assets/semantic-helper.css @@ -1,18 +1,110 @@ -/*body, h3, h2, h1, p { - color: #3d3d3d; -}*/ + +:root { + --primary_color: #1C84DA; + --secondary_color: #1EAEDB; + + --element_background_color: #FFF; + + + + --background_color: #fff; + --text_color: #3d3d3d; + --outline_color: rgba(34,36,38,.15); +} + +/* Night mode colors */ +:root { + --background_color: #000; + --text_color: #a98457; + --outline_color: #a98457; +} + +/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/ +body{ + color: var(--text_color); + background-color: var(--background_color); +} +.ui.form input:not([type]), +.ui.form input:not([type]):focus { + color: var(--text_color); + background-color: var(--background_color); + border-color: var(--border_color); +} +.ui.basic.label { + color: var(--text_color); + background-color: var(--background_color); + border-color: var(--border_color); +} +div.ui.basic.green.label { + background-color: var(--background_color) !important; +} +.ui.basic.button, .ui.basic.buttons .button { + background-color: var(--background_color) !important; + color: var(--text_color) !important; + border: 1px solid; + border-color: var(--border_color) !important; + box-shadow: none; +} +.ui.basic.button:focus, .ui.basic.button:hover { + background-color: var(--background_color) !important; + color: var(--text_color) !important; + box-shadow: none; +} +.ui.tabular.menu .item { + background-color: var(--background_color) !important; + color: var(--text_color) !important; +} +.ui.tabular.menu .item.active { + background-color: var(--background_color) !important; + color: var(--text_color) !important; + border-color: var(--border_color) !important; +} +/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/ + + .clickable { cursor: pointer; } +.textarea-height { + height: calc(100% - 105px); +} .ck-content { font-family: 'Open Sans' !important; font-size: 1.3rem !important; background-color: rgba(255, 255, 255, 0); - height: 100%; + height: calc(100% - 40px); overflow: hidden; } +.ck .ck-editor__nested-editable:focus { + background-color: var(--background_color) !important; +} .ui.white.button { background: #FFF; +} + +.fade-in-fwd { + animation: fade-in-fwd 0.8s both; +} + +/* ---------------------------------------------- + * Generated by Animista on 2019-7-25 17:12:5 + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation fade-in-fwd + * ---------------------------------------- + */ +@keyframes fade-in-fwd { + 0% { + transform: translateZ(-80px); + opacity: 0; + } + 100% { + transform: translateZ(0); + opacity: 1; + } } \ No newline at end of file diff --git a/client/src/components/DeleteButtonComponent.vue b/client/src/components/DeleteButtonComponent.vue new file mode 100644 index 0000000..76edd1d --- /dev/null +++ b/client/src/components/DeleteButtonComponent.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/client/src/components/HelpPage.vue b/client/src/components/HelpPage.vue index 489fc6f..98f62bd 100644 --- a/client/src/components/HelpPage.vue +++ b/client/src/components/HelpPage.vue @@ -2,6 +2,9 @@
+ CTRL + SHIFT + V - paste without formatting + CTRL + Z - Undo in note, Undo youtube video player embed. +

Block formatting

The following block formatting options are available:

diff --git a/client/src/components/InputNotes.vue b/client/src/components/InputNotes.vue index 4c4b26d..909dd67 100644 --- a/client/src/components/InputNotes.vue +++ b/client/src/components/InputNotes.vue @@ -1,49 +1,54 @@