diff --git a/css/apps/rich-workspace.scss b/css/apps/rich-workspace.scss new file mode 100644 index 00000000..bbc3ed19 --- /dev/null +++ b/css/apps/rich-workspace.scss @@ -0,0 +1,330 @@ +@import '../_mixins.scss'; + +:root { + --color-info: var(--telekom-color-text-and-icon-primary-standard); + --color-success: var(--telekom-color-text-and-icon-functional-success); + --color-warning: var(--telekom-color-text-and-icon-functional-warning); + --color-danger: var(--telekom-color-text-and-icon-functional-danger); +} + +#rich-workspace { + padding-right: 0 !important; + + .editor { + + .text-menubar { + padding: 0; + opacity: 1; + visibility: unset; + + &__entries { + gap: 1rem; + + .button-vue { + border: none; + min-width: 24px; + padding: 0; + width: 24px !important; + + &:hover:not(:disabled) { + background-color: unset; + @include color-icon; + } + + &__icon { + + svg { + display: none; + } + + span { + background-position: center; + height: 24px; + width: 24px; + } + + .arrow-u-left-top-icon { + background-image: var(--icon-undo-dark); + } + + .arrow-u-right-top-icon { + background-image: var(--icon-redo-dark); + } + + .format-bold-icon { + background-image: var(--icon-bold-dark); + } + + .format-italic-icon { + background-image: var(--icon-italic-dark); + } + + .format-underline-icon { + background-image: var(--icon-underline-dark); + } + + .format-strikethrough-icon { + background-image: var(--icon-strikethrough-dark); + } + + .format-header1-icon { + background-image: var(--icon-h1-dark); + } + + .format-header2-icon { + background-image: var(--icon-h2-dark); + } + + .format-header3-icon { + background-image: var(--icon-h3-dark); + } + + .format-header4-icon { + background-image: var(--icon-h4-dark); + } + + .format-header5-icon { + background-image: var(--icon-h5-dark); + } + + .format-header6-icon { + background-image: var(--icon-h6-dark); + } + + .format-list-bulleted-icon { + background-image: var(--icon-ul-dark); + } + + .format-list-numbered-icon { + background-image: var(--icon-ol-dark); + } + + .format-list-checkbox-icon { + background-image: var(--icon-checklist-dark); + } + + .format-quote-close-icon { + background-image: var(--icon-quote-dark); + } + + .information-icon { + background-image: var(--icon-callout-dark); + } + + .checkbox-marked-circle-icon { + background-image: var(--icon-success-dark); + } + + .alert-icon { + background-image: var(--icon-alert-dark); + } + + .alert-decagram-icon { + background-image: var(--icon-warning-dark); + } + + .code-tags-icon { + background-image: var(--icon-code-dark); + } + + .table-icon { + background-image: var(--icon-table-dark); + } + + .emoticon-outline-icon { + background-image: var(--icon-emoji-dark); + } + + .image-multiple-outline-icon { + background-image: var(--icon-image-dark); + } + + .help-circle-icon { + background-image: var(--icon-help-dark); + } + } + } + + .entry-action { + + &.is-active:not(.entry-action-item) { + background-color: unset; + } + } + } + + .save-status { + color: var(--color-main-text); + justify-content: flex-end; + margin-right: 6px; + top: 0; + } + + .session-list { + display: none; + } + } + + .content-wrapper { + padding: 1rem 0 !important; + + .ProseMirror { + + *:last-child { + margin-bottom: 0; + } + + .callout { + + .callout__icon { + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + height: 24px; + width: 24px; + + svg { + margin: 2px; + opacity: 0; + } + + } + + .information-icon { + background-image: var(--icon-info-magenta); + } + + .checkbox-marked-circle-icon { + background-image: var(--icon-success-success); + } + + .alert-icon { + background-image: var(--icon-warning-warning); + } + + .alert-decagram-icon { + background-image: var(--icon-danger-danger); + } + } + } + + .table-wrapper { + + .table-settings { + opacity: 1; + right: 0; + top: 1rem; + + .button-vue { + + &:hover:not(:disabled) { + @include color-icon; + } + + .table-cog-icon { + background-image: var(--icon-table-settings-dark); + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + height: 24px; + width: 24px; + + svg { + display: none; + } + } + + } + } + + th, td:last-child { + + .action-item { + opacity: 1; + } + } + + } + } + + .v-popper__popper { + + .v-popper__inner { + padding: 0.5rem; + } + + svg { + display: none; + } + + .material-design-icon { + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + } + + .format-header1-icon { + background-image: var(--icon-h1-dark); + } + + .format-header2-icon { + background-image: var(--icon-h2-dark); + } + + .format-header3-icon { + background-image: var(--icon-h3-dark); + } + + .format-header4-icon { + background-image: var(--icon-h4-dark); + } + + .format-header5-icon { + background-image: var(--icon-h5-dark); + } + + .format-header6-icon { + background-image: var(--icon-h6-dark); + } + + .information-icon { + background-image: var(--icon-callout-dark); + } + + .checkbox-marked-circle-icon { + background-image: var(--icon-success-dark); + } + + .alert-icon { + background-image: var(--icon-alert-dark); + } + + .alert-decagram-icon { + background-image: var(--icon-warning-dark); + } + } + } +} + + + +.v-popper__popper { + + .v-popper__inner { + padding: 0.5rem; + } + + .material-design-icon { + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + + &.delete-icon { + background-image: var(--icon-delete-dark); + + svg { + display: none; + } + } + } +} \ No newline at end of file diff --git a/css/nmcstyle.scss b/css/nmcstyle.scss index e7a0ff70..3040267b 100644 --- a/css/nmcstyle.scss +++ b/css/nmcstyle.scss @@ -46,6 +46,7 @@ @import 'apps/sharing.scss'; @import 'apps/viewer.scss'; @import 'apps/media.scss'; +@import 'apps/rich-workspace.scss'; /* v25 override */ @import 'v25/ncappnavigation.scss'; diff --git a/img/rich-workspace/alert.svg b/img/rich-workspace/alert.svg new file mode 100644 index 00000000..e99110be --- /dev/null +++ b/img/rich-workspace/alert.svg @@ -0,0 +1,7 @@ + + + /svg/icon/alert/warning/default + + + + \ No newline at end of file diff --git a/img/rich-workspace/bold.svg b/img/rich-workspace/bold.svg new file mode 100644 index 00000000..14c8ef7a --- /dev/null +++ b/img/rich-workspace/bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/callout.svg b/img/rich-workspace/callout.svg new file mode 100644 index 00000000..88c7c7c2 --- /dev/null +++ b/img/rich-workspace/callout.svg @@ -0,0 +1,7 @@ + + + /svg/icon/alert/information/default + + + + \ No newline at end of file diff --git a/img/rich-workspace/checklist.svg b/img/rich-workspace/checklist.svg new file mode 100644 index 00000000..0e612e17 --- /dev/null +++ b/img/rich-workspace/checklist.svg @@ -0,0 +1,7 @@ + + + /svg/icon/content/todo-list/default + + + + \ No newline at end of file diff --git a/img/rich-workspace/code.svg b/img/rich-workspace/code.svg new file mode 100644 index 00000000..5bf19d38 --- /dev/null +++ b/img/rich-workspace/code.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/emoji.svg b/img/rich-workspace/emoji.svg new file mode 100644 index 00000000..b7774de0 --- /dev/null +++ b/img/rich-workspace/emoji.svg @@ -0,0 +1,7 @@ + + + /svg/icon/content/smile/default + + + + \ No newline at end of file diff --git a/img/rich-workspace/h1.svg b/img/rich-workspace/h1.svg new file mode 100644 index 00000000..65043669 --- /dev/null +++ b/img/rich-workspace/h1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/h2.svg b/img/rich-workspace/h2.svg new file mode 100644 index 00000000..67233e84 --- /dev/null +++ b/img/rich-workspace/h2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/h3.svg b/img/rich-workspace/h3.svg new file mode 100644 index 00000000..b74bbb53 --- /dev/null +++ b/img/rich-workspace/h3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/h4.svg b/img/rich-workspace/h4.svg new file mode 100644 index 00000000..f592ab04 --- /dev/null +++ b/img/rich-workspace/h4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/h5.svg b/img/rich-workspace/h5.svg new file mode 100644 index 00000000..87f17088 --- /dev/null +++ b/img/rich-workspace/h5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/h6.svg b/img/rich-workspace/h6.svg new file mode 100644 index 00000000..261372bc --- /dev/null +++ b/img/rich-workspace/h6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/help.svg b/img/rich-workspace/help.svg new file mode 100644 index 00000000..1c3ca49b --- /dev/null +++ b/img/rich-workspace/help.svg @@ -0,0 +1,7 @@ + + + /svg/icon/alert/help/default + + + + \ No newline at end of file diff --git a/img/rich-workspace/image.svg b/img/rich-workspace/image.svg new file mode 100644 index 00000000..7ef443a6 --- /dev/null +++ b/img/rich-workspace/image.svg @@ -0,0 +1,7 @@ + + + /svg/icon/user_file/image-file/default + + + + \ No newline at end of file diff --git a/img/rich-workspace/italic.svg b/img/rich-workspace/italic.svg new file mode 100644 index 00000000..692a22d9 --- /dev/null +++ b/img/rich-workspace/italic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/ol.svg b/img/rich-workspace/ol.svg new file mode 100644 index 00000000..805312f1 --- /dev/null +++ b/img/rich-workspace/ol.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/quote.svg b/img/rich-workspace/quote.svg new file mode 100644 index 00000000..50c03c62 --- /dev/null +++ b/img/rich-workspace/quote.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/redo.svg b/img/rich-workspace/redo.svg new file mode 100644 index 00000000..a871a6df --- /dev/null +++ b/img/rich-workspace/redo.svg @@ -0,0 +1,7 @@ + + + /svg/icon/action/forward/selected + + + + \ No newline at end of file diff --git a/img/rich-workspace/strikethrough.svg b/img/rich-workspace/strikethrough.svg new file mode 100644 index 00000000..f651f6c5 --- /dev/null +++ b/img/rich-workspace/strikethrough.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/success.svg b/img/rich-workspace/success.svg new file mode 100644 index 00000000..887dc6b4 --- /dev/null +++ b/img/rich-workspace/success.svg @@ -0,0 +1,7 @@ + + + /svg/icon/action/success/default + + + + \ No newline at end of file diff --git a/img/rich-workspace/table-settings.svg b/img/rich-workspace/table-settings.svg new file mode 100644 index 00000000..34008cfc --- /dev/null +++ b/img/rich-workspace/table-settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/table.svg b/img/rich-workspace/table.svg new file mode 100644 index 00000000..77da09a6 --- /dev/null +++ b/img/rich-workspace/table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/ul.svg b/img/rich-workspace/ul.svg new file mode 100644 index 00000000..54b6671e --- /dev/null +++ b/img/rich-workspace/ul.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/underline.svg b/img/rich-workspace/underline.svg new file mode 100644 index 00000000..31df7f62 --- /dev/null +++ b/img/rich-workspace/underline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/rich-workspace/undo.svg b/img/rich-workspace/undo.svg new file mode 100644 index 00000000..70fc6f95 --- /dev/null +++ b/img/rich-workspace/undo.svg @@ -0,0 +1,7 @@ + + + /svg/icon/action/reply/selected + + + + \ No newline at end of file diff --git a/img/rich-workspace/warning.svg b/img/rich-workspace/warning.svg new file mode 100644 index 00000000..10feff28 --- /dev/null +++ b/img/rich-workspace/warning.svg @@ -0,0 +1,7 @@ + + + 01_24px/icon/alert/error/default + + + + \ No newline at end of file diff --git a/src/icons.mjs b/src/icons.mjs index 0762708d..342ac538 100644 --- a/src/icons.mjs +++ b/src/icons.mjs @@ -16,6 +16,9 @@ const colors = { green: '46ba61', grey: '969696', magenta: 'e20074', + success: '008653', + danger: 'd91308', + warning: 'b63d00' } const colorSvg = function(svg = '', color = '000') { @@ -103,7 +106,32 @@ const icons = { check: path.join(__dirname, '../img', 'checkmarktick.svg'), 'toggle-filelist': path.join(__dirname, '../img', 'actions', 'toggle-filelist.svg'), 'toggle-pictures': path.join(__dirname, '../img', 'actions', 'toggle-pictures.svg'), - restore: path.join(__dirname, '../img', 'actions', 'restore.svg') + restore: path.join(__dirname, '../img', 'actions', 'restore.svg'), + alert: path.join(__dirname, '../img', 'rich-workspace', 'warning.svg'), + bold: path.join(__dirname, '../img', 'rich-workspace', 'bold.svg'), + checklist: path.join(__dirname, '../img', 'rich-workspace', 'checklist.svg'), + callout: path.join(__dirname, '../img', 'rich-workspace', 'callout.svg'), + code: path.join(__dirname, '../img', 'rich-workspace', 'code.svg'), + emoji: path.join(__dirname, '../img', 'rich-workspace', 'emoji.svg'), + h1: path.join(__dirname, '../img', 'rich-workspace', 'h1.svg'), + h2: path.join(__dirname, '../img', 'rich-workspace', 'h2.svg'), + h3: path.join(__dirname, '../img', 'rich-workspace', 'h3.svg'), + h4: path.join(__dirname, '../img', 'rich-workspace', 'h4.svg'), + h5: path.join(__dirname, '../img', 'rich-workspace', 'h5.svg'), + h6: path.join(__dirname, '../img', 'rich-workspace', 'h6.svg'), + help: path.join(__dirname, '../img', 'rich-workspace', 'help.svg'), + image: path.join(__dirname, '../img', 'rich-workspace', 'image.svg'), + italic: path.join(__dirname, '../img', 'rich-workspace', 'italic.svg'), + ol: path.join(__dirname, '../img', 'rich-workspace', 'ol.svg'), + quote: path.join(__dirname, '../img', 'rich-workspace', 'quote.svg'), + redo: path.join(__dirname, '../img', 'rich-workspace', 'redo.svg'), + strikethrough: path.join(__dirname, '../img', 'rich-workspace', 'strikethrough.svg'), + success: path.join(__dirname, '../img', 'rich-workspace', 'success.svg'), + table: path.join(__dirname, '../img', 'rich-workspace', 'table.svg'), + 'table-settings': path.join(__dirname, '../img', 'rich-workspace', 'table-settings.svg'), + ul: path.join(__dirname, '../img', 'rich-workspace', 'ul.svg'), + underline: path.join(__dirname, '../img', 'rich-workspace', 'underline.svg'), + undo: path.join(__dirname, '../img', 'rich-workspace', 'undo.svg') } const iconsColor = { @@ -123,6 +151,22 @@ const iconsColor = { path: path.join(__dirname, '../img', 'email', 'checkmark.svg'), color: 'magenta', }, + info: { + path: path.join(__dirname, '../img', 'rich-workspace', 'callout.svg'), + color: 'magenta', + }, + success: { + path: path.join(__dirname, '../img', 'rich-workspace', 'success.svg'), + color: 'success', + }, + warning: { + path: path.join(__dirname, '../img', 'rich-workspace', 'warning.svg'), + color: 'warning', + }, + danger: { + path: path.join(__dirname, '../img', 'rich-workspace', 'alert.svg'), + color: 'danger', + } } let css = ''