feat: justify bookmarks

src/component/bookmark/index.js

@@ -554,6 +554,7 @@ bookmark.init = () => {
     'bookmark.size'
   ]);
   applyCSSClass([
+    'bookmark.area.justify',
     'bookmark.item.justify',
     'bookmark.orientation',
     'bookmark.style'

src/component/group/index.css

@@ -103,6 +103,21 @@
   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;
+}
+
+.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;

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'] },

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({

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']

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

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';
 

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."

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",

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": {