From a2cff14babe4abfba2676c553dbd619bc5cad57c Mon Sep 17 00:00:00 2001 From: Konstantin Myakshin Date: Sun, 9 Jun 2024 20:56:49 +0200 Subject: [PATCH] Add support of multi-columns descriptions Signed-off-by: Konstantin Myakshin --- package-lock.json | 6 ++++++ package.json | 1 + src/mixins/ViewsMixin.js | 8 +++++++- src/scssmixins/markdownOutput.scss | 23 +++++++++++++++++++++++ 4 files changed, 37 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index cb30cd788..67e277e14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "crypto-js": "^4.2.0", "debounce": "^2.1.0", "markdown-it": "^14.1.0", + "markdown-it-container": "^4.0.0", "p-debounce": "^4.0.0", "p-queue": "^8.0.1", "v-click-outside": "^3.2.0", @@ -9035,6 +9036,11 @@ "markdown-it": "bin/markdown-it.mjs" } }, + "node_modules/markdown-it-container": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-container/-/markdown-it-container-4.0.0.tgz", + "integrity": "sha512-HaNccxUH0l7BNGYbFbjmGpf5aLHAMTinqRZQAEQbMr2cdD3z91Q6kIo1oUn1CQndkT03jat6ckrdRYuwwqLlQw==" + }, "node_modules/markdown-it/node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", diff --git a/package.json b/package.json index 7e6c6487a..a334ec350 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "crypto-js": "^4.2.0", "debounce": "^2.1.0", "markdown-it": "^14.1.0", + "markdown-it-container": "^4.0.0", "p-debounce": "^4.0.0", "p-queue": "^8.0.1", "v-click-outside": "^3.2.0", diff --git a/src/mixins/ViewsMixin.js b/src/mixins/ViewsMixin.js index 420085f60..7d4d431d0 100644 --- a/src/mixins/ViewsMixin.js +++ b/src/mixins/ViewsMixin.js @@ -25,6 +25,7 @@ import { showError } from '@nextcloud/dialogs' import { emit } from '@nextcloud/event-bus' import axios from '@nextcloud/axios' import MarkdownIt from 'markdown-it' +import MarkdownItContainer from 'markdown-it-container' import CancelableRequest from '../utils/CancelableRequest.js' import OcsResponse2Data from '../utils/OcsResponse2Data.js' @@ -65,7 +66,12 @@ export default { cancelFetchFullForm: () => {}, // markdown renderer for descriptions - markdownit: new MarkdownIt({ breaks: true }), + markdownit: new MarkdownIt({ breaks: true }) + .use(MarkdownItContainer, 'columns', {}) + .use(MarkdownItContainer, 'column-single', {}) + .use(MarkdownItContainer, 'column-double', {}) + .use(MarkdownItContainer, 'column-triple', {}) + .use(MarkdownItContainer, 'column-quad', {}), } }, diff --git a/src/scssmixins/markdownOutput.scss b/src/scssmixins/markdownOutput.scss index 7995f12cb..2e89daebf 100644 --- a/src/scssmixins/markdownOutput.scss +++ b/src/scssmixins/markdownOutput.scss @@ -83,5 +83,28 @@ list-style-type: square; } } + + .columns { + display: flex; + flex-direction: row; + justify-content: space-between; + column-gap: 2em; + + .column-single { + flex: 1 1; + } + + .column-double { + flex: 2 1; + } + + .column-triple { + flex: 3 1; + } + + .column-quad { + flex: 4 1; + } + } } }