refactor: Extract folder assignment logic into a new SelectionFolderMenu component, adding new icons and updating related styles.
This commit is contained in:
@@ -102,7 +102,7 @@
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.panel-header > .panel-header__title:first-child {
|
||||
.panel-header>.panel-header__title:first-child {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -307,6 +307,7 @@
|
||||
max-height: max(240px, 50vh);
|
||||
overflow-y: auto;
|
||||
padding: 0 0.25rem 0.25rem;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.selection-assignment__item {
|
||||
@@ -315,6 +316,7 @@
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selection-assignment__label {
|
||||
@@ -627,8 +629,7 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.document-summary__details {
|
||||
}
|
||||
.document-summary__details {}
|
||||
|
||||
.document-summary__details-list {
|
||||
margin: 0;
|
||||
@@ -744,7 +745,7 @@
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.detail-meta__row > .icon-button {
|
||||
.detail-meta__row>.icon-button {
|
||||
margin: -0.25rem;
|
||||
}
|
||||
|
||||
@@ -800,205 +801,49 @@
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.bulk-move select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.preview-stack {
|
||||
position: relative;
|
||||
.selection-assignment__header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview-stack--stacked {
|
||||
width: 100%;
|
||||
min-height: 420px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-stack--empty {
|
||||
width: 100%;
|
||||
min-height: 420px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-stack__item {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 120ms ease;
|
||||
filter: drop-shadow(0 2px 6px var(--shadow-soft));
|
||||
transform-origin: center;
|
||||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.preview-stack .preview-stack__item.orientation-portrait {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.preview-stack .preview-stack__item.orientation-landscape {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-subtle);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-message {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-filename {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-download {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-download svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.preview-pane--stack {
|
||||
min-height: 460px;
|
||||
position: relative;
|
||||
--preview-nav-scale: 1;
|
||||
}
|
||||
|
||||
.preview-pane__nav-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.2em;
|
||||
height: 2.2em;
|
||||
padding: 0.45em;
|
||||
border-radius: 999px;
|
||||
background: var(--preview-nav-bg);
|
||||
color: var(--preview-nav-fg);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, opacity 0.15s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.preview-pane__nav-button:hover:not([disabled]) {
|
||||
background: var(--preview-nav-bg-hover);
|
||||
}
|
||||
|
||||
.preview-pane__nav-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.preview-pane__nav-button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.preview-pane__nav {
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.selection-assignment__nav-title .icon-button {
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
|
||||
.selection-assignment__nav-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.preview-pane__nav--overlay {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(var(--preview-nav-scale, 1));
|
||||
margin-top: 0;
|
||||
pointer-events: none;
|
||||
z-index: 20;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.preview-pane__nav--overlay .preview-pane__nav-button {
|
||||
pointer-events: auto;
|
||||
transform: scale(calc(1 / var(--preview-nav-scale, 1)));
|
||||
}
|
||||
|
||||
.preview-pane__media:hover .preview-pane__nav--overlay,
|
||||
.desk-item__card:hover .preview-pane__nav--overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.bulk-tags {
|
||||
.selection-assignment__nav-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
margin: 0.4rem 0 0.6rem;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-field {
|
||||
margin: 0.9rem 0;
|
||||
}
|
||||
|
||||
.detail-field__label {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-field__value {
|
||||
.selection-assignment__item-content {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-field__value .meta {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-panel dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.
|
||||
|
||||
.detail-panel .tag-list,
|
||||
.document-summary .tag-list,
|
||||
.correspondent-list {
|
||||
.selection-assignment__item-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag-list__empty {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-metadata__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0.75rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
gap: 0.25rem;
|
||||
}
|
||||
Reference in New Issue
Block a user