Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create an edit dialog, ultimately to be used by both a "move to another folder" button in bulk edit mode (included in this CL) and an "edit" context menu item (not included in this CL). Dialog is incomplete, will be fleshed out in follow-ups. Bug: 1365606 Change-Id: Ief2835e0a74b222101e8195200309ef177c0650e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4166360 Commit-Queue: Emily Shack <emshack@chromium.org> Reviewed-by: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/main@{#1096604}
- Loading branch information
Emily Shack
authored and
Chromium LUCI CQ
committed
Jan 25, 2023
1 parent
755b84e
commit 7d6cdd4
Showing
19 changed files
with
431 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
chrome/app/generated_resources_grd/IDS_BOOKMARKS_EDIT_CANCEL.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| fe5b327c457d6a3192928c3b35fdd90e5e8e8463 |
1 change: 1 addition & 0 deletions
1
chrome/app/generated_resources_grd/IDS_BOOKMARKS_EDIT_MOVE_TO.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| fe5b327c457d6a3192928c3b35fdd90e5e8e8463 |
1 change: 1 addition & 0 deletions
1
chrome/app/generated_resources_grd/IDS_BOOKMARKS_EDIT_MOVE_TO_ANOTHER_FOLDER.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 57c9ca09e43e40316ea3cbea3d011385594deeba |
1 change: 1 addition & 0 deletions
1
chrome/app/generated_resources_grd/IDS_BOOKMARKS_EDIT_NEW_FOLDER.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| fe5b327c457d6a3192928c3b35fdd90e5e8e8463 |
1 change: 1 addition & 0 deletions
1
chrome/app/generated_resources_grd/IDS_BOOKMARKS_EDIT_SAVE.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| fe5b327c457d6a3192928c3b35fdd90e5e8e8463 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
chrome/browser/resources/side_panel/bookmarks/power_bookmarks_edit_dialog.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <style include="cr-shared-style"> | ||
| :host { | ||
| --cr-dialog-body-padding-horizontal: 16px; | ||
| --cr-dialog-title-slot-padding-start: 16px; | ||
| --cr-dialog-width: 300px; | ||
| } | ||
|
|
||
| .body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 8px; | ||
| } | ||
|
|
||
| .button-row { | ||
| font-size: 12px; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .folder-header { | ||
| color: var(--cr-primary-text-color); | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .folder-row { | ||
| display: flex; | ||
| width: auto; | ||
| } | ||
|
|
||
| .folder-selector { | ||
| border: 1px solid var(--scrollable-border-color); | ||
| border-radius: 2px; | ||
| height: 160px; | ||
| } | ||
| </style> | ||
|
|
||
| <cr-dialog id="dialog"> | ||
| <div slot="title">$i18n{editMoveFolderTo}</div> | ||
| <div slot="body" class="body"> | ||
| <div class="folder-header"> | ||
| <template is="dom-if" if="[[activeFolder_]]" restamp> | ||
| TODO: Back Button | ||
| </template> | ||
| [[getActiveFolderTitle_(activeFolder_)]] | ||
| </div> | ||
| <div id="folder-selector" class="folder-selector"> | ||
| <iron-list scroll-target="folder-selector" | ||
| items="[[getShownFolders_(activeFolder_, topLevelBookmarks_)]]"> | ||
| <template> | ||
| <div class="folder-row">TODO: Folder row</div> | ||
| </template> | ||
| </iron-list> | ||
| </div> | ||
| </div> | ||
| <div class="button-row" slot="button-container"> | ||
| <cr-button on-click="onNewFolder_">$i18n{editNewFolder}</cr-button> | ||
| <div> | ||
| <cr-button on-click="onCancel_">$i18n{editCancel}</cr-button> | ||
| <cr-button class="action-button cr-button-gap" on-click="onSave_"> | ||
| $i18n{editSave} | ||
| </cr-button> | ||
| </div> | ||
| </div> | ||
| </cr-dialog> |
115 changes: 115 additions & 0 deletions
115
chrome/browser/resources/side_panel/bookmarks/power_bookmarks_edit_dialog.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| // Copyright 2023 The Chromium Authors | ||
| // Use of this source code is governed by a BSD-style license that can be | ||
| // found in the LICENSE file. | ||
|
|
||
| import '../strings.m.js'; | ||
| import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js'; | ||
| import 'chrome://resources/cr_elements/cr_shared_style.css.js'; | ||
| import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js'; | ||
|
|
||
| import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js'; | ||
| import {assertNotReached} from 'chrome://resources/js/assert_ts.js'; | ||
| import {loadTimeData} from 'chrome://resources/js/load_time_data.js'; | ||
| import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; | ||
|
|
||
| import {getTemplate} from './power_bookmarks_edit_dialog.html.js'; | ||
|
|
||
| export interface PowerBookmarksEditDialogElement { | ||
| $: { | ||
| dialog: CrDialogElement, | ||
| }; | ||
| } | ||
|
|
||
| function isFolder(node: chrome.bookmarks.BookmarkTreeNode) { | ||
| return !node.url; | ||
| } | ||
|
|
||
| export class PowerBookmarksEditDialogElement extends PolymerElement { | ||
| static get is() { | ||
| return 'power-bookmarks-edit-dialog'; | ||
| } | ||
|
|
||
| static get template() { | ||
| return getTemplate(); | ||
| } | ||
|
|
||
| static get properties() { | ||
| return { | ||
| topLevelBookmarks_: { | ||
| type: Array, | ||
| value: () => [], | ||
| }, | ||
|
|
||
| selectedBookmarks_: { | ||
| type: Array, | ||
| value: () => [], | ||
| }, | ||
|
|
||
| selectedFolder_: { | ||
| type: Object, | ||
| value: null, | ||
| }, | ||
|
|
||
| activeFolder_: { | ||
| type: Object, | ||
| value: null, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| private topLevelBookmarks_: chrome.bookmarks.BookmarkTreeNode[]; | ||
| private selectedBookmarks_: chrome.bookmarks.BookmarkTreeNode[]; | ||
| private selectedFolder_: chrome.bookmarks.BookmarkTreeNode|undefined; | ||
| private activeFolder_: chrome.bookmarks.BookmarkTreeNode|undefined; | ||
|
|
||
| showDialog( | ||
| activeFolder: chrome.bookmarks.BookmarkTreeNode|undefined, | ||
| topLevelBookmarks: chrome.bookmarks.BookmarkTreeNode[], | ||
| selectedBookmarks: chrome.bookmarks.BookmarkTreeNode[]) { | ||
| this.activeFolder_ = activeFolder; | ||
| this.topLevelBookmarks_ = topLevelBookmarks; | ||
| this.selectedBookmarks_ = selectedBookmarks; | ||
| this.$.dialog.showModal(); | ||
| } | ||
|
|
||
| private getActiveFolderTitle_() { | ||
| if (this.activeFolder_ && | ||
| this.activeFolder_.id !== loadTimeData.getString('otherBookmarksId') && | ||
| this.activeFolder_.id !== loadTimeData.getString('mobileBookmarksId')) { | ||
| return this.activeFolder_!.title; | ||
| } else { | ||
| return loadTimeData.getString('allBookmarks'); | ||
| } | ||
| } | ||
|
|
||
| private getShownFolders_(): chrome.bookmarks.BookmarkTreeNode[] { | ||
| if (this.activeFolder_ && this.activeFolder_.children) { | ||
| return this.activeFolder_.children!.filter(isFolder); | ||
| } else if (!this.activeFolder_ && this.topLevelBookmarks_) { | ||
| return this.topLevelBookmarks_.filter(isFolder); | ||
| } | ||
| assertNotReached('No bookmarks to display in edit menu'); | ||
| } | ||
|
|
||
| private onNewFolder_() { | ||
| // TODO | ||
| } | ||
|
|
||
| private onCancel_() { | ||
| this.$.dialog.close(); | ||
| } | ||
|
|
||
| private onSave_() { | ||
| // TODO | ||
| this.$.dialog.close(); | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'power-bookmarks-edit-dialog': PowerBookmarksEditDialogElement; | ||
| } | ||
| } | ||
|
|
||
| customElements.define( | ||
| PowerBookmarksEditDialogElement.is, PowerBookmarksEditDialogElement); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.