From 89e94a5bb8c9af3553417055cd147c62f4b2ce8f Mon Sep 17 00:00:00 2001 From: Anton Kovalchuck Date: Sun, 18 May 2025 17:32:26 +0300 Subject: [PATCH 1/2] Added Table widget --- website/app.js | 1 + website/lib/mainWidgets.js | 1 + website/modules/asset/ui/src/index.scss | 1 + .../asset/ui/src/scss/_table-widget.scss | 112 +++++++++++++++++ website/modules/table-widget/index.js | 118 ++++++++++++++++++ .../modules/table-widget/views/widget.html | 38 ++++++ 6 files changed, 271 insertions(+) create mode 100644 website/modules/asset/ui/src/scss/_table-widget.scss create mode 100644 website/modules/table-widget/index.js create mode 100644 website/modules/table-widget/views/widget.html diff --git a/website/app.js b/website/app.js index ceb395d9..9c7f8898 100644 --- a/website/app.js +++ b/website/app.js @@ -119,6 +119,7 @@ function createAposConfig() { 'categories': {}, 'case-studies-carousel-widget': {}, 'container-widget': {}, + 'table-widget': {}, }, }; } diff --git a/website/lib/mainWidgets.js b/website/lib/mainWidgets.js index e2540474..7fbcd961 100644 --- a/website/lib/mainWidgets.js +++ b/website/lib/mainWidgets.js @@ -19,6 +19,7 @@ module.exports = { '@apostrophecms/rich-text': { ...headingToolbar, }, + 'table': {}, }, columns: 2, }, diff --git a/website/modules/asset/ui/src/index.scss b/website/modules/asset/ui/src/index.scss index b8dcc0d4..61034dfb 100644 --- a/website/modules/asset/ui/src/index.scss +++ b/website/modules/asset/ui/src/index.scss @@ -20,3 +20,4 @@ @import './scss/_page-intro'; @import './scss/_cases.scss'; @import './scss/_container.scss'; +@import './scss/_table-widget'; diff --git a/website/modules/asset/ui/src/scss/_table-widget.scss b/website/modules/asset/ui/src/scss/_table-widget.scss new file mode 100644 index 00000000..603a9b1d --- /dev/null +++ b/website/modules/asset/ui/src/scss/_table-widget.scss @@ -0,0 +1,112 @@ +.sf-table-intro { + margin-bottom: 40px; + max-width: 800px; + + h2 { + margin-bottom: 20px; + } + + p { + color: $gray-300; + } +} + +.sf-table { + width: 100%; + display: flex; + flex-direction: column; + + @include breakpoint-medium { + flex-direction: row; + flex-wrap: wrap; + } +} + +.sf-table-row { + display: flex; + flex-direction: column; + width: 100%; + border: 1px solid $gray-200; + padding: 24px; + + &:not(:last-child) { + border-bottom: none; + } + @include breakpoint-medium { + width: calc(33.3% - 24px); + padding: 40px; + margin: 0 -1px 0 0; + border: 1px solid $gray-200; + + &:not(:last-child) { + border: 1px solid $gray-200; + } + &:nth-child(3n+6) { + border-top: none; + } + &:nth-child(4n) { + border-top: none; + } + &:nth-child(n+4) { + border-top: none; + } + + } +} + +.sf-table-cell-title { + font-weight: 700; + font-size: 14px; + color: $gray-500; + + @include breakpoint-medium { + font-size: 22px; + } +} + +.sf-table-title { + font-weight: 700; + font-size: 18px; + color: $gray-500; + margin: 0; + + @include breakpoint-medium { + font-size: 22px; + } +} + +.sf-table-cell-description { + border-bottom: none; + font-weight: 500; + font-size: 14px; + color: $gray-300; + + p { + margin: 24px 0 0; + } + @include breakpoint-medium { + p { + margin: 32px 0 0; + min-height: 80px; + } + } +} + + +.sf-table-link { + margin-top:24px; + + a { + color: $gray-300; + text-decoration: underline; + font-weight: 300; + font-size: 11px; + + &:hover { + text-decoration: none; + } + } + @include breakpoint-medium { + margin-top: 32px; + } +} \ No newline at end of file diff --git a/website/modules/table-widget/index.js b/website/modules/table-widget/index.js new file mode 100644 index 00000000..39f5d334 --- /dev/null +++ b/website/modules/table-widget/index.js @@ -0,0 +1,118 @@ +const extendedToolbar = require('../../lib/extendedToolbar'); +const headingToolbar = require('../../lib/headingToolbar'); + +module.exports = { + extend: '@apostrophecms/widget-type', + options: { + label: 'Table Widget', + icon: 'table-icon', + }, + fields: { + add: { + intro: { + label: 'Intro', + type: 'area', + options: { + max: 1, + widgets: { + '@apostrophecms/rich-text': { + ...headingToolbar, + }, + }, + }, + required: false, + }, + rows: { + label: 'Table Rows', + type: 'array', + titleField: 'title', + min: 1, + fields: { + add: { + title: { + label: 'Title', + type: 'string', + required: true, + }, + description: { + label: 'Description', + type: 'area', + options: { + widgets: { + '@apostrophecms/rich-text': { + ...extendedToolbar, + }, + }, + }, + required: true, + }, + linkTitle: { + label: 'Link Title', + type: 'string', + }, + linkType: { + label: 'Link type', + type: 'select', + required: false, + choices: [ + { + label: 'Page', + value: 'page', + }, + { + label: 'File', + value: 'file', + }, + { + label: 'Custom URL', + value: 'custom', + }, + ], + }, + _page: { + label: 'Link to page', + type: 'relationship', + withType: '@apostrophecms/page', + max: 1, + builders: { + project: { + title: 1, + _url: 1, + }, + }, + if: { + linkType: 'page', + }, + }, + _file: { + label: 'Link to file', + type: 'relationship', + withType: '@apostrophecms/file', + max: 1, + if: { + linkType: 'file', + }, + }, + customUrl: { + label: 'URL for custom link', + type: 'url', + if: { + linkType: 'custom', + }, + }, + target: { + label: 'Will the link open a new browser tab?', + type: 'checkboxes', + choices: [ + { + label: 'Open in a new tab', + value: '_blank', + }, + ], + }, + }, + }, + }, + }, + }, +}; diff --git a/website/modules/table-widget/views/widget.html b/website/modules/table-widget/views/widget.html new file mode 100644 index 00000000..2a97d964 --- /dev/null +++ b/website/modules/table-widget/views/widget.html @@ -0,0 +1,38 @@ +
+ {% if data.widget.intro %} +
+ {% area data.widget, 'intro' %} +
+ {% endif %} + +
+ {% for row in data.widget.rows %} +
+
+

{{ row.title }}

+
+ +
+ {% area row, 'description' %} + + {% if row.linkTitle %} +
+ {% set linkUrl = '' %} + {% if row.linkType == 'page' and row._page[0] %} + {% set linkUrl = row._page[0]._url %} + {% elif row.linkType == 'file' and row._file[0] %} + {% set linkUrl = row._file[0]._url %} + {% elif row.linkType == 'custom' and row.customUrl %} + {% set linkUrl = row.customUrl %} + {% endif %} + + {% if linkUrl %} + {{ row.linkTitle }} + {% endif %} +
+ {% endif %} +
+
+ {% endfor %} +
+
From 994ad923e69ff193819eb19fee97e03529cc6215 Mon Sep 17 00:00:00 2001 From: Anton Kovalchuck Date: Sun, 18 May 2025 17:44:27 +0300 Subject: [PATCH 2/2] fixed sonarqube issue --- website/modules/table-widget/index.js | 66 +-------------------------- 1 file changed, 2 insertions(+), 64 deletions(-) diff --git a/website/modules/table-widget/index.js b/website/modules/table-widget/index.js index 39f5d334..94c7205b 100644 --- a/website/modules/table-widget/index.js +++ b/website/modules/table-widget/index.js @@ -1,5 +1,6 @@ const extendedToolbar = require('../../lib/extendedToolbar'); const headingToolbar = require('../../lib/headingToolbar'); +const linkSchema = require('../../lib/linkSchema'); module.exports = { extend: '@apostrophecms/widget-type', @@ -46,70 +47,7 @@ module.exports = { }, required: true, }, - linkTitle: { - label: 'Link Title', - type: 'string', - }, - linkType: { - label: 'Link type', - type: 'select', - required: false, - choices: [ - { - label: 'Page', - value: 'page', - }, - { - label: 'File', - value: 'file', - }, - { - label: 'Custom URL', - value: 'custom', - }, - ], - }, - _page: { - label: 'Link to page', - type: 'relationship', - withType: '@apostrophecms/page', - max: 1, - builders: { - project: { - title: 1, - _url: 1, - }, - }, - if: { - linkType: 'page', - }, - }, - _file: { - label: 'Link to file', - type: 'relationship', - withType: '@apostrophecms/file', - max: 1, - if: { - linkType: 'file', - }, - }, - customUrl: { - label: 'URL for custom link', - type: 'url', - if: { - linkType: 'custom', - }, - }, - target: { - label: 'Will the link open a new browser tab?', - type: 'checkboxes', - choices: [ - { - label: 'Open in a new tab', - value: '_blank', - }, - ], - }, + ...linkSchema.fields.add, }, }, },