From 1661a9d961d88050fa4bc1ff142c4b5fd447ad7d Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Sun, 23 Apr 2023 14:15:13 +0200 Subject: [PATCH 1/2] feat: justify bookmarks --- src/component/bookmark/index.js | 1 + src/component/group/index.css | 10 +++++++ src/component/menu/index.js | 2 +- .../menuContent/bookmarkSetting/index.js | 30 +++++++++++++++++++ src/component/state/index.js | 2 ++ src/component/update/index.js | 8 +++++ src/component/version/index.js | 2 +- src/locale/en_GB/messages.json | 20 +++++++++++++ src/locale/en_US/messages.json | 20 +++++++++++++ src/manifest.json | 2 +- 10 files changed, 94 insertions(+), 3 deletions(-) diff --git a/src/component/bookmark/index.js b/src/component/bookmark/index.js index 9405185f..0ebb6287 100644 --- a/src/component/bookmark/index.js +++ b/src/component/bookmark/index.js @@ -554,6 +554,7 @@ bookmark.init = () => { 'bookmark.size' ]); applyCSSClass([ + 'bookmark.area.justify', 'bookmark.item.justify', 'bookmark.orientation', 'bookmark.style' diff --git a/src/component/group/index.css b/src/component/group/index.css index 26536598..15d0f273 100644 --- a/src/component/group/index.css +++ b/src/component/group/index.css @@ -103,6 +103,16 @@ display: none; } +.is-bookmark-area-justify-center .group-body { + display: flex; + justify-content: center; +} + +.is-bookmark-area-justify-right .group-body { + display: flex; + justify-content: flex-end; +} + .group-control { margin-left: calc(calc(var(--layout-space) * var(--layout-gutter)) * -1); height: 0; diff --git a/src/component/menu/index.js b/src/component/menu/index.js index de5ff4a7..5a6ae6f5 100644 --- a/src/component/menu/index.js +++ b/src/component/menu/index.js @@ -9,7 +9,7 @@ menu.navData = [ { name: 'theme', active: true, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] }, { name: 'layout', active: false, overscroll: true, sub: ['scaling', 'area', 'padding', 'gutter', 'alignment', 'page'] }, { name: 'header', active: false, overscroll: true, sub: ['alignment', 'greeting', 'transitional', 'clock', 'date', 'search'] }, - { name: 'bookmark', active: false, overscroll: true, sub: ['general', 'style', 'orientation', 'sort'] }, + { name: 'bookmark', active: false, overscroll: true, sub: ['general', 'style', 'orientation', 'alignment', 'sort'] }, { name: 'group', active: false, overscroll: true, sub: ['alignment', 'name', 'collapse', 'toolbar'] }, { name: 'toolbar', active: false, overscroll: true, sub: ['size', 'location', 'position', 'controls'] }, { name: 'data', active: false, overscroll: true, sub: ['restore', 'backup', 'clear'] }, diff --git a/src/component/menuContent/bookmarkSetting/index.js b/src/component/menuContent/bookmarkSetting/index.js index c70c9919..f3dcd1ac 100644 --- a/src/component/menuContent/bookmarkSetting/index.js +++ b/src/component/menuContent/bookmarkSetting/index.js @@ -14,6 +14,7 @@ import { Edge } from '../../edge'; import { Control_helperText } from '../../control/helperText'; import { Control_radio } from '../../control/radio'; +import { Control_radioGrid } from '../../control/radioGrid'; import { Control_checkbox } from '../../control/checkbox'; import { Control_slider } from '../../control/slider'; @@ -28,6 +29,7 @@ bookmarkSetting.control = { general: {}, style: {}, orientation: {}, + alignment: {}, sort: {} }; @@ -43,6 +45,7 @@ bookmarkSetting.disable = () => { bookmarkSetting.control.style.enable(); bookmarkSetting.control.orientation.orientationElement.enable(); bookmarkSetting.control.orientation.orientationHelper.enable(); + bookmarkSetting.control.alignment.justify.enable(); bookmarkSetting.control.sort.letter.enable(); bookmarkSetting.control.sort.icon.enable(); bookmarkSetting.control.sort.name.enable(); @@ -56,6 +59,7 @@ bookmarkSetting.disable = () => { bookmarkSetting.control.style.disable(); bookmarkSetting.control.orientation.orientationElement.disable(); bookmarkSetting.control.orientation.orientationHelper.disable(); + bookmarkSetting.control.alignment.justify.disable(); bookmarkSetting.control.sort.letter.disable(); bookmarkSetting.control.sort.icon.disable(); bookmarkSetting.control.sort.name.disable(); @@ -339,6 +343,32 @@ bookmarkSetting.orientation = (parent) => { }; +bookmarkSetting.alignment = (parent) => { + + bookmarkSetting.control.alignment.justify = new Control_radioGrid({ + object: state.get.current(), + radioGroup: [ + { id: 'bookmark-area-justify-left', labelText: message.get('menuContentBookmarkAlignmentJustifyLeft'), value: 'left', position: 1 }, + { id: 'bookmark-area-justify-center', labelText: message.get('menuContentBookmarkAlignmentJustifyCenter'), value: 'center', position: 2 }, + { id: 'bookmark-area-justify-right', labelText: message.get('menuContentBookmarkAlignmentJustifyRight'), value: 'right', position: 3 } + ], + label: message.get('menuContentBookmarkAlignmentJustifyLabel'), + groupName: 'bookmark-area-justify', + path: 'bookmark.area.justify', + gridSize: '3x1', + action: () => { + applyCSSClass('bookmark.area.justify'); + data.save(); + } + }); + + parent.appendChild( + node('div', [ + bookmarkSetting.control.alignment.justify.wrap(), + ]) + ); +}; + bookmarkSetting.sort = (parent) => { bookmarkSetting.control.sort.letter = new Button({ diff --git a/src/component/state/index.js b/src/component/state/index.js index 9cc64f71..56d2ec9d 100644 --- a/src/component/state/index.js +++ b/src/component/state/index.js @@ -59,6 +59,7 @@ state.default = { edit: false }, bookmark: { + area: { justify: 'left' }, size: 100, url: { show: true }, line: { show: true }, @@ -236,6 +237,7 @@ state.option = { search: { width: { by: ['auto', 'custom'] }, text: { justify: ['left', 'center', 'right'] } } }, bookmark: { + area: { justify: ['left', 'center', 'right'] }, item: { justify: ['left', 'center', 'right'] }, orientation: ['top', 'bottom'], style: ['block', 'list'] diff --git a/src/component/update/index.js b/src/component/update/index.js index deae4856..036ec283 100644 --- a/src/component/update/index.js +++ b/src/component/update/index.js @@ -627,6 +627,14 @@ update.mod['7.5.0'] = function(data) { }; +update.mod['7.6.0'] = function(data) { + data.state.bookmark.area = { + justify: 'left' + }; + + return data; +}; + update.run = (data) => { // loop over all updates in mod.all object diff --git a/src/component/version/index.js b/src/component/version/index.js index b77a3d1e..5abf2c72 100644 --- a/src/component/version/index.js +++ b/src/component/version/index.js @@ -1,6 +1,6 @@ export const version = {}; -version.number = '7.5.0'; +version.number = '7.6.0'; version.name = 'Delightful Komodo Dragon'; diff --git a/src/locale/en_GB/messages.json b/src/locale/en_GB/messages.json index 125dc3e0..3b193a62 100644 --- a/src/locale/en_GB/messages.json +++ b/src/locale/en_GB/messages.json @@ -163,6 +163,10 @@ "message": "Orientation", "description": "Label for the settings menu navigation." }, + "menuNavBookmarkSubNavAlignment": { + "message": "Alignment", + "description": "Label for the settings menu alignment." + }, "menuNavBookmarkSubNavSort": { "message": "Sort", "description": "Label for the settings menu navigation." @@ -1571,6 +1575,22 @@ "message": "Display the URL and Controls either at the top or bottom of a Bookmark Tile.", "description": "Helper text for bookmark orientation." }, + "menuContentBookmarkAlignmentJustifyLabel": { + "message": "Bookmark area alignment", + "description": "Justify bookmarks." + }, + "menuContentBookmarkAlignmentJustifyLeft": { + "message": "Left", + "description": "Justify bookmarks left." + }, + "menuContentBookmarkAlignmentJustifyCenter": { + "message": "Center", + "description": "Justify bookmarks centre." + }, + "menuContentBookmarkAlignmentJustifyRight": { + "message": "Right", + "description": "Justify bookmarks right." + }, "menuContentBookmarkSortLetter": { "message": "By letter", "description": "Button to sort bookmarks by letter." diff --git a/src/locale/en_US/messages.json b/src/locale/en_US/messages.json index a3b3bca0..e86ad549 100644 --- a/src/locale/en_US/messages.json +++ b/src/locale/en_US/messages.json @@ -163,6 +163,10 @@ "message": "Orientation", "description": "Label for the settings menu navigation." }, + "menuNavBookmarkSubNavAlignment": { + "message": "Alignment", + "description": "Label for the settings menu alignment." + }, "menuNavBookmarkSubNavSort": { "message": "Sort", "description": "Label for the settings menu navigation." @@ -1570,6 +1574,22 @@ "menuContentBookmarkOrientationHelperPara1": { "message": "Display the URL and Controls either at the top or bottom of a Bookmark Tile.", "description": "Helper text for bookmark orientation." + }, + "menuContentBookmarkAlignmentJustifyLabel": { + "message": "Bookmark area alignment", + "description": "Justify bookmarks." + }, + "menuContentBookmarkAlignmentJustifyLeft": { + "message": "Left", + "description": "Justify bookmarks left." + }, + "menuContentBookmarkAlignmentJustifyCenter": { + "message": "Center", + "description": "Justify bookmarks centre." + }, + "menuContentBookmarkAlignmentJustifyRight": { + "message": "Right", + "description": "Justify bookmarks right." }, "menuContentBookmarkSortLetter": { "message": "By letter", diff --git a/src/manifest.json b/src/manifest.json index 302de7f0..d64730c8 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "name": "__MSG_appName__", "short_name": "__MSG_appShortName__", "description": "__MSG_appDescription__", - "version": "7.5.0", + "version": "7.6.0", "manifest_version": 2, "default_locale": "en_GB", "chrome_url_overrides": { From 75a4e56e864f55837e253401c7f60a35e23c6601 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Sun, 23 Apr 2023 15:28:07 +0200 Subject: [PATCH 2/2] fix: bookmark width --- src/component/group/index.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/component/group/index.css b/src/component/group/index.css index 15d0f273..38e6bef7 100644 --- a/src/component/group/index.css +++ b/src/component/group/index.css @@ -113,6 +113,11 @@ justify-content: flex-end; } +.is-bookmark-area-justify-center .bookmark, +.is-bookmark-area-justify-right .bookmark { + width: var(--group-cell-width) +} + .group-control { margin-left: calc(calc(var(--layout-space) * var(--layout-gutter)) * -1); height: 0;