From 80a3d840319597e914e59b2ff96fd675b7a41066 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 18 Feb 2021 16:20:02 +0100 Subject: [PATCH 1/5] Add manually the new code of rbeer --- webapp/assets/_new/styles/tokens.scss | 13 +++- .../components/Editor/ContentViewer.story.js | 78 +++++++++++++++++++ webapp/components/Editor/Editor.story.js | 30 +++++-- webapp/components/Editor/Editor.vue | 35 +++++++++ 4 files changed, 147 insertions(+), 9 deletions(-) create mode 100644 webapp/components/Editor/ContentViewer.story.js diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 5ab1e8aef..1f3447015 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -191,10 +191,10 @@ $font-weight-bold: 600; * @presenter LineHeight */ -$line-height-large: 1.5; -$line-height-base: 1.3; -$line-height-small: 1.1; -$line-height-smaller: 1.0; +$line-height-large: 1.5rem; +$line-height-base: 1.3rem; +$line-height-small: 1.1rem; +$line-height-smaller: 1.0rem; /** * @tokens Letter Spacing @@ -352,3 +352,8 @@ $media-query-small: (min-width: 600px); $media-query-medium: (min-width: 768px); $media-query-large: (min-width: 1024px); $media-query-x-large: (min-width: 1200px); + +/** + * @tokens Background Images + */ +$background-image-logo: url('/icon.png'); \ No newline at end of file diff --git a/webapp/components/Editor/ContentViewer.story.js b/webapp/components/Editor/ContentViewer.story.js new file mode 100644 index 000000000..b4997ece4 --- /dev/null +++ b/webapp/components/Editor/ContentViewer.story.js @@ -0,0 +1,78 @@ +import { storiesOf } from '@storybook/vue' +import { withA11y } from '@storybook/addon-a11y' +import ContentViewer from '~/components/Editor/ContentViewer.vue' +import helpers from '~/storybook/helpers' + +helpers.init() + +storiesOf('ContentViewer', module) + .addDecorator(withA11y) + .addDecorator((storyFn) => { + const ctx = storyFn() + return { + components: { ctx }, + template: ` + + + + `, + } + }) + .addDecorator(helpers.layout) + .add('Basic formatting', () => ({ + components: { ContentViewer }, + store: helpers.store, + data: () => ({ + content: ` +

Basic formatting

+

+ Here is some italic, bold and underline text. +
+ Also do we have some inline links here. +

+

Heading 3

+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+

Heading 4

+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+
Heading 5
+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+ +

Unordered List

+ + +

Ordered List

+
    +
  1. +

    ordered lists

    +

    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsu

    +
      +
    1. +

      can have indentations

      +
        +
      1. +

        and text parapgraphs, too

        +

        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

        +
        2. +
      +
      2. +
    +
    2. +
+ `, + }), + template: ``, + })) diff --git a/webapp/components/Editor/Editor.story.js b/webapp/components/Editor/Editor.story.js index 24e3fa927..dfcc3cdf4 100644 --- a/webapp/components/Editor/Editor.story.js +++ b/webapp/components/Editor/Editor.story.js @@ -79,15 +79,35 @@ storiesOf('Editor', module)

  • Also some list

  • with

  • several

    • -

  • points

    • +
  • +

    points

    +
      +
    • +

      and indentations

      +

      as well as text parapgraphs

      +

      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

      +
      • +
    +

    • Ordered List

      -

    1. justo

      2. -

    2. dolores

      3. -

    3. et ea rebum

      4. -

    4. kasd gubergren

      5. +
    5. +

      ordered lists

      +

      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsu

      +
        +
      1. +

        can have indentations

        +
          +
        1. +

          and text parapgraphs, too

          +

          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

          +
          2. +
        +
        2. +
      +
    `, }), diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index f0e9c7909..8de7bb81f 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -327,5 +327,40 @@ li > p { p { margin: 0 0 $space-x-small; } + + ul { + padding-left: $space-small; + li { + display: block; + p:first-child:before { + content: ''; + background-image: $background-image-logo; + background-position: center; + background-repeat: no-repeat; + background-size: $line-height-small; + padding: $space-none $space-x-small; + margin-right: $space-x-small; + } + p:not(:first-child) { + padding-left: $space-base; + } + } + } + ol { + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters + counter-reset: item; + padding-left: $space-small; + li { + display: block; + p:first-child:before { + content: counters(item, '.') '.'; + counter-increment: item; + margin-right: $space-x-small; + } + p:not(:first-child) { + padding-left: $space-base; + } + } + } } From 24e823d2628f8c1a4ed0fd6d0d02cd6f50a0c674 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 18 Feb 2021 16:24:55 +0100 Subject: [PATCH 2/5] Correct empty lines --- webapp/components/Editor/Editor.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 8de7bb81f..24a674bd0 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -330,8 +330,10 @@ li > p { ul { padding-left: $space-small; + li { display: block; + p:first-child:before { content: ''; background-image: $background-image-logo; @@ -341,22 +343,27 @@ li > p { padding: $space-none $space-x-small; margin-right: $space-x-small; } + p:not(:first-child) { padding-left: $space-base; } } } + ol { // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters counter-reset: item; padding-left: $space-small; + li { display: block; + p:first-child:before { content: counters(item, '.') '.'; counter-increment: item; margin-right: $space-x-small; } + p:not(:first-child) { padding-left: $space-base; } From 2231d5aee3a5d6066b9fb6d6c750d245d482edb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Mon, 22 Feb 2021 11:13:54 +0100 Subject: [PATCH 3/5] Updated yarn.lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 5a7953349..06e855034 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5107,7 +5107,7 @@ request-progress@3.0.0: dependencies: throttleit "^1.0.0" -"request@github:cypress-io/request#b5af0d1fa47eec97ba980cde90a13e69a2afcd16": +request@cypress-io/request#b5af0d1fa47eec97ba980cde90a13e69a2afcd16: version "2.88.1" resolved "https://codeload.github.com/cypress-io/request/tar.gz/b5af0d1fa47eec97ba980cde90a13e69a2afcd16" dependencies: From 996853321fbcf6e270e31491514dd81dc979422d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Mon, 22 Feb 2021 15:25:04 +0100 Subject: [PATCH 4/5] Remove list background image and adjust list style --- webapp/assets/_new/styles/tokens.scss | 1 - webapp/components/Editor/Editor.vue | 24 +++++++++++++++++------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 1f3447015..53abd01f8 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -356,4 +356,3 @@ $media-query-x-large: (min-width: 1200px); /** * @tokens Background Images */ -$background-image-logo: url('/icon.png'); \ No newline at end of file diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 24a674bd0..ff2e09cab 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -329,19 +329,25 @@ li > p { } ul { - padding-left: $space-small; + // padding-left: $space-small; + padding-left: $space-x-large; + // list-style-position: outside; + // list-style-type: circle; li { display: block; + list-style-position: outside; + text-indent: -$space-large; p:first-child:before { - content: ''; - background-image: $background-image-logo; - background-position: center; - background-repeat: no-repeat; - background-size: $line-height-small; + // list-style-position: inside; + content: '•'; padding: $space-none $space-x-small; margin-right: $space-x-small; + // text-indent: -1em; + // padding-left: 1em; + // padding: 10px 0 10px 20px; + // text-indent: -1em; } p:not(:first-child) { @@ -353,14 +359,18 @@ li > p { ol { // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters counter-reset: item; - padding-left: $space-small; + // padding-left: $space-small; + padding-left: $space-x-large; li { display: block; + list-style-position: outside; + text-indent: -$space-large; p:first-child:before { content: counters(item, '.') '.'; counter-increment: item; + padding: $space-none $space-x-small; margin-right: $space-x-small; } From c41414700d2ac984fdf9961e7acef0bc40f21512 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Mon, 22 Feb 2021 15:39:32 +0100 Subject: [PATCH 5/5] Cleanup --- webapp/components/Editor/Editor.vue | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index ff2e09cab..67329a60b 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -329,25 +329,16 @@ li > p { } ul { - // padding-left: $space-small; padding-left: $space-x-large; - // list-style-position: outside; - // list-style-type: circle; li { display: block; - list-style-position: outside; text-indent: -$space-large; p:first-child:before { - // list-style-position: inside; content: '•'; padding: $space-none $space-x-small; margin-right: $space-x-small; - // text-indent: -1em; - // padding-left: 1em; - // padding: 10px 0 10px 20px; - // text-indent: -1em; } p:not(:first-child) { @@ -355,17 +346,15 @@ li > p { } } } - + ol { // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters counter-reset: item; - // padding-left: $space-small; - padding-left: $space-x-large; + padding-left: $space-x-large + 4px; li { display: block; - list-style-position: outside; - text-indent: -$space-large; + text-indent: -$space-large - 4px; p:first-child:before { content: counters(item, '.') '.';