<style include="cr-icons cr-shared-style sp-shared-style">
:host {
--cr-dialog-body-padding-horizontal: 16px;
--cr-dialog-title-slot-padding-start: 16px;
--cr-dialog-width: 300px;
--cr-icon-button-margin-start: 0;
}
.body {
display: flex;
flex-direction: column;
}
.button-row {
font-size: 12px;
justify-content: space-between;
}
.folder-row {
align-items: center;
display: flex;
gap: 8px;
padding-inline-end: 8px;
width: 100%;
}
.folder-row:hover {
background-color: var(--cr-hover-background-color);
}
.folder-row:focus-visible {
outline-color: var(--cr-focus-outline-color);
}
.folder-row[selected] {
background-color: var(
--color-side-panel-bookmarks-selected-folder-background);
}
.folder-row[selected] > .cr-icon {
background-color: var(--color-side-panel-bookmarks-selected-folder-icon);
}
.folder-row[selected] > .folder-title {
color: var(--color-side-panel-bookmarks-selected-folder-foreground);
}
.folder-row[selected] > .subpage-arrow {
--cr-icon-button-fill-color: var(
--color-side-panel-bookmarks-selected-folder-icon);
}
.folder-selector {
border: 1px solid var(--color-side-panel-dialog-divider);
border-radius: 2px;
height: 160px;
margin-top: 8px;
overflow: auto;
}
.folder-title {
width: 100%;
}
.input-label {
align-items: center;
display: flex;
height: 27px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: var(--cr-primary-text-color);
}
.input-row {
align-items: baseline;
display: grid;
gap: 4px;
grid-template-columns: 52px auto;
}
.input-section {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.name-input {
--cr-icon-color: var(--cr-secondary-text-color);
--cr-input-error-display: none;
}
</style>
<cr-dialog id="dialog">
<div slot="title">[[getDialogTitle_(moveOnly_)]]</div>
<div slot="body" class="body">
<div class="input-section" hidden="[[moveOnly_]]">
<div class="input-row name-input">
<span class="input-label" aria-hidden="true">$i18n{editName}</span>
<cr-input class="stroked" id="nameInput"
value="[[getBookmarkName_(selectedBookmarks_.*)]]"
aria-label="$i18n{editName}"></cr-input>
</div>
<div class="input-row">
<span class="input-label" aria-hidden="true">$i18n{editUrl}</span>
<cr-input class="stroked" id="urlInput" type="url"
value="[[getBookmarkUrl_(selectedBookmarks_.*)]]"
error-message="$i18n{editInvalidUrl}"
aria-label="$i18n{editUrl}" required></cr-input>
</div>
</div>
<sp-heading hide-back-button="[[!activeFolderPath_.length]]"
back-button-title="$i18n{tooltipBack}"
back-button-aria-label="[[getBackButtonLabel_(activeFolderPath_.*)]]"
on-back-button-click="onBack_">
<h2 slot="heading">[[getActiveFolderTitle_(activeFolderPath_.*)]]</h2>
</sp-heading>
<div id="folder-selector" class="folder-selector">
<iron-list scroll-target="folder-selector"
items="[[getShownFolders_(activeFolderPath_.*, topLevelBookmarks_,
newFolders_.*)]]">
<template>
<div class="folder-row"
title="[[item.title]]"
selected$="[[isSelected_(item, selectedFolder_)]]"
on-click="onFolderSelected_"
tabindex="0">
<div class="cr-icon icon-folder-open"></div>
<div class="folder-title">
[[item.title]]
</div>
<template is="dom-if" restamp
if="[[hasAvailableChildFolders_(item, newFolders_.*)]]">
<cr-icon-button class="subpage-arrow"
title="[[getForwardButtonTooltip_(item)]]"
aria-label="[[getForwardButtonLabel_(item)]]"
on-click="onForward_">
</cr-icon-button>
</template>
</div>
</template>
</iron-list>
</div>
</div>
<div class="button-row" slot="button-container">
<cr-button id="newFolderButton" 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>