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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 = ''