Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DA Floodgate Copy UI #3395

Merged
merged 4 commits into from
Dec 19, 2024
Merged

DA Floodgate Copy UI #3395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b3efd6a
DA Floodgate Copy UI
colloyd Dec 18, 2024
10827bb
fix for copy error list color
colloyd Dec 18, 2024
cc89619
pr feedback
colloyd Dec 18, 2024
c4c646f
more pr feedback about fragments and assets
colloyd Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 144 additions & 55 deletions tools/floodbox/floodbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,14 @@ input[type='text'] {
width: 100%;
}

input[type="checkbox"] {
display: block;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
}

textarea {
width: 100%;
min-height: 240px;
Expand Down Expand Up @@ -124,20 +132,25 @@ select {
padding: var(--spacing-400);
}

.detail-card-remaining {
.detail-card-remaining,
.detail-card-fragments-assets {
background: rgb(202 248 250);
}

.detail-card-total {
.detail-card-total,
.detail-card-pages {
background: rgb(181 230 252);
}

.detail-card-errors,
.detail-card-promote-errors,
.detail-card-preview-errors,
.detail-card-publish-errors,
.detail-card-copy-errors,
.url-list.url-list-promote-errors,
.url-list.url-list-preview-errors,
.url-list.url-list-publish-errors {
.url-list.url-list-publish-errors,
.url-list.url-list-copy-errors {
background: rgb(255 214 209);
}

Expand All @@ -150,6 +163,10 @@ select {
background: rgb(255 236 209);
}

.detail-card-sheets {
background: #caffa4;
}

.detail-card .cancel-button {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -185,6 +202,14 @@ select {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.detail-cards.find-cards {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.detail-cards.copy-preview-cards {
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.toggle-list-icon, .icon-button {
display: block;
border: 0;
Expand Down Expand Up @@ -229,6 +254,73 @@ select {
display: block;
}

.tab-ui {
margin: var(--spacing-400) 0;
}

.tab-nav {
display: flex;
list-style-type: none;
padding: 5px;
}

.tab-nav li button{
opacity: 0.6;
}

.tab-nav li.active button{
opacity: 1;
}

.tab-nav li button[disabled]::before {
background: rgb(0 0 0 / 5%);
border: 1px solid rgb(0 0 0 / 50%);
}

.tabs {
background-color: var(--s2-gray-50);
padding: 20px;
border: 1px solid var(--s2-gray-200);
}

.tab-step {
display: none;
}

.tab-step.active {
display: block;
}

.ribbon {
--r: .8em;

padding-inline: calc(var(--r) + 1.5em);
line-height: 1.8;
clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%, var(--r) 50%);
background: var(--s2-blue-800);
font-size: var(--s2-font-size-400);
font-weight: bold;
color: #fff;
border: none;
text-wrap: nowrap;
}

.ribbon:disabled {
color: var(--s2-gray-800);
}

.info-box {
background: var(--s2-gray-75);
border-radius: var(--s2-radius-100);
padding: var(--spacing-100) var(--spacing-400);
margin-top: var(--spacing-400);
}

.info-box p {
margin-top: var(--spacing-50);
margin-bottom: var(--spacing-50);
}

.url-list {
display: none;
background: rgb(215 247 225);
Expand Down Expand Up @@ -265,10 +357,6 @@ select {
gap: 24px;
}

.urls-result li:last-child {
margin: 0;
}

.url-path {
white-space: nowrap;
overflow-x: hidden;
Expand All @@ -285,69 +373,70 @@ select {
user-select: none;
}

.tab-ui {
margin: var(--spacing-400) 0;
.url-checklist {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid rgb(209 209 209);
border-radius: 18px;
overflow: hidden;
background: rgb(248 248 248);
}

.tab-nav {
.url-checklist li {
margin-top: -1px;
margin-bottom: -1px;
padding: 24px;
display: flex;
list-style-type: none;
padding: 5px;
}

.tab-nav li button{
opacity: 0.6;
}

.tab-nav li.active button{
opacity: 1;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 24px;
border-top: 1px solid rgb(209 209 209);
border-bottom: 1px solid rgb(209 209 209);
}

.tab-nav li button[disabled]::before {
background: rgb(0 0 0 / 5%);
border: 1px solid rgb(0 0 0 / 50%);
.url-checklist li:hover {
background: rgb(228 240 255);
border-top: 1px solid rgb(20 122 243);
border-bottom: 1px solid rgb(20 122 243);
}

.tabs {
background-color: var(--s2-gray-50);
padding: 20px;
border: 1px solid var(--s2-gray-200);
}

.tab-step {
display: none;
.path {
color: var(--s2-gray-800);
text-decoration: none;
flex: 1 1 auto;
word-break: break-all;
}

.tab-step.active {
display: block;
.status {
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
border-radius: var(--s2-radius-200);
text-align: center;
color: #FFF;
text-transform: uppercase;
width: 72px;
padding: 4px 0;
}

.ribbon {
--r: .8em;

padding-inline: calc(var(--r) + 1.5em);
line-height: 1.8;
clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%, var(--r) 50%);
background: var(--s2-blue-800);
font-size: var(--s2-font-size-400);
font-weight: bold;
color: #fff;
border: none;
text-wrap: nowrap;
.status-ready {
background: var(--s2-green);
}

.ribbon:disabled {
color: var(--s2-gray-800);
.status-error {
background: var(--s2-red);
}

.info-box {
background: var(--s2-gray-75);
border-radius: var(--s2-radius-100);
padding: var(--spacing-100) var(--spacing-400);
margin-top: var(--spacing-400);
.urls-result li:last-child {
margin: 0;
}

.info-box p {
margin-top: var(--spacing-50);
margin-bottom: var(--spacing-50);
@media (width > 600px) {
.url-checklist li {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
}
46 changes: 38 additions & 8 deletions tools/floodbox/floodbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable import/no-unresolved, no-underscore-dangle, class-methods-use-this */
import { html, nothing } from 'https://da.live/deps/lit/dist/index.js';

export function handleToggleList(e) {
function handleToggleList(e) {
const card = e.target.closest('.detail-card');
const { name } = e.target.closest('button').dataset;
const list = this.shadowRoot.querySelector(`.url-list-${name}`);
Expand All @@ -16,16 +16,22 @@ export function handleToggleList(e) {
list.classList.add('is-expanded');
}

export function handleClear(event) {
function handleClear(event) {
event.preventDefault();
const field = event.target.closest('button').previousElementSibling;
field.value = '';
this._canPromote = false;
this._repoReady = false;
this._gbExpPath = '';
this.requestUpdate();
}

export function updateTabUi(app, target, delay = 0) {
function handleCheck(app, url) {
url.checked = !url.checked;
app.urls = [...app.urls];
}

function updateTabUi(app, target, delay = 0) {
setTimeout(() => {
const tabNav = app.shadowRoot.querySelectorAll('.tab-nav li');
const tabs = app.shadowRoot.querySelectorAll('.tab-step');
Expand All @@ -38,8 +44,8 @@ export function updateTabUi(app, target, delay = 0) {
}, delay);
}

export function renderBadge(name, length, hasList = false, hasCancel = false) {
const lowerName = name.toLowerCase().replace(/ /g, '-');
function renderBadge(name, length, hasList = false, hasCancel = false) {
const lowerName = name.toLowerCase().replace(/\W+/g, '-');
const hasExpand = length > 0 && hasList;

return html`
Expand All @@ -59,7 +65,7 @@ export function renderBadge(name, length, hasList = false, hasCancel = false) {
</div>`;
}

export function renderList(name, urls) {
function renderList(name, urls) {
const lowerName = name.toLowerCase().replace(/ /g, '-');

return html`
Expand All @@ -79,11 +85,23 @@ export function renderList(name, urls) {
`;
}

export function renderClearButton() {
function renderChecklist(app, urls) {
return html`
<ul class="url-checklist">
${urls ? urls.map((url) => html`
<li>
<div class="path">${url}</div>
</li>
`) : nothing}
</ul>
`;
}

function renderClearButton() {
return html`<button class="icon-button clear-button" @click=${this.handleClear}><svg class="icon"><use href="#spectrum-close"/></svg></button>`;
}

export function renderTabNav(app, config) {
function renderTabNav(app, config) {
return html`
<ul class="tab-nav">
${config.map((step, index) => html`
Expand All @@ -94,3 +112,15 @@ export function renderTabNav(app, config) {
</ul>
`;
}

export {
handleToggleList,
handleClear,
handleCheck,
updateTabUi,
renderBadge,
renderList,
renderChecklist,
renderClearButton,
renderTabNav,
};
15 changes: 12 additions & 3 deletions tools/floodbox/floodgate/floodgate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,16 @@ body {
margin: 0 var(--spacing-1000);
}

/* CHANGE ME TO SOMETHING ELSE WHEN WE FIGURE OUT WHERE TO PUT THIS INFORMATION */
/* .button-row span {
.repo-row {
display: flex;
justify-content: flex-end;
margin: 0 var(--spacing-200) var(--spacing-400);
}

.repo-row p {
margin: 0;
}

.repo-row span {
text-transform: uppercase;
} */
}
Loading
Loading