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.

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

graybox ui initial polish #3223

Merged
merged 1 commit into from
Nov 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
53 changes: 24 additions & 29 deletions tools/floodbox/graybox/graybox.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
h1 {
margin-block-end: 0;
}

h3 {
margin-block-start: 0;
color: var(--s2-gray-700);
}

.info-box {
background: var(--s2-gray-75);
border-radius: var(--s2-radius-100);
Expand All @@ -19,7 +28,15 @@ form {
flex-direction: column;
}

input.path {
.input-row {
align-items: center;
display: flex;
font-family: var(--body-font-family);
gap: var(--spacing-200);
margin: var(--spacing-200) 0;
}

.input-row input[type='text'] {
border: 2px solid var(--s2-gray-200);
border-radius: var(--s2-radius-100);
padding: 0 8px;
Expand All @@ -29,25 +46,6 @@ input.path {
width: 100%;
}

.input-row {
font-family: var(--body-font-family);
flex: 2;
display: block;
gap: var(--spacing-200);
margin-top: var(--spacing-200);
}

.checkbox-container {
display: flex;
align-items: center;
gap: var(--spacing-200);
margin-top: var(--spacing-100);
}

.input-row button {
margin-top: var(--spacing-200);
}

.input-row textarea {
border: 2px solid var(--s2-gray-200);
border-radius: var(--s2-radius-100);
Expand All @@ -56,6 +54,12 @@ input.path {
width: 100%;
}

.checkbox-container {
display: flex;
gap: var(--spacing-200);
margin-top: var(--spacing-100);
}

.promote-ignore {
width: 100%;
margin-top: var(--spacing-100);
Expand All @@ -70,7 +74,6 @@ input.path {
}

.action-select {
margin-top: var(--spacing-200);
border: 2px solid var(--s2-gray-200);
border-radius: var(--s2-radius-100);
padding: 2px 8px;
Expand All @@ -79,11 +82,3 @@ input.path {
.button-row {
margin-top: var(--spacing-200);
}

h1 {
margin-bottom: 1px;
}
h3 {
margin-top: 1px;
color: var(--s2-gray-700);
}
61 changes: 30 additions & 31 deletions tools/floodbox/graybox/graybox.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ export default class MiloGraybox extends LitElement {
this._crawlDuration = 0;
this._promoteDuration = 0;
this._previewPublishDuration = 0;
this.selectedOption = 'promoteEntireExp';
this.selectedOption = 'promoteExp';
this.promoteIgnore = false;
}

connectedCallback() {
Expand Down Expand Up @@ -225,10 +226,10 @@ export default class MiloGraybox extends LitElement {
await this.startPreviewPublish(org, repo);
}

handleCancel(event) {
handleClear(event) {
event.preventDefault();
const input = this.shadowRoot.querySelector('input[name="path"]');
input.value = '';
const field = event.target.previousElementSibling;
field.value = '';
this._canPromote = false;
this._gbExpPath = '';
this.requestUpdate();
Expand All @@ -251,9 +252,8 @@ export default class MiloGraybox extends LitElement {
this.requestUpdate();
}

toggleTextArea(event) {
const promoteIgnoreTextArea = this.shadowRoot.querySelector('.promote-ignore');
promoteIgnoreTextArea.style.display = event.target.checked ? 'block' : 'none';
togglePromoteIgnore(event) {
this.promoteIgnore = event.target.checked;
this.requestUpdate();
}

Expand Down Expand Up @@ -346,43 +346,42 @@ export default class MiloGraybox extends LitElement {
<h1>Graybox</h1>
<h3>Promote Graybox experiences and paths to the source site.</h3>
<form>
<!-- Dropdown for Options -->
<div class="input-row">
<label for="actionSelect">Select Action:</label>
<div class="input-row promote-type">
<label for="actionSelect">Promote Type:</label>
<select id="actionSelect" class="action-select" @change=${this.handleOptionChange}>
<option value="promoteEntireExp">Promote Graybox Experience</option>
<option value="promoteExp">Promote Graybox Experience</option>
<option value="promotePaths">Promote Graybox Paths</option>
</select>
</div>

<!-- Option #1: Promote Graybox Experience -->
${this.selectedOption === 'promoteEntireExp' ? html`
${this.selectedOption === 'promoteExp' ? html`
<div class="input-row">
<input class="path" name="path" placeholder="Enter Experience Path" value="/sukamat/da-bacom-graybox/summit25" @input=${this.validateInput} />
</div>
<div class="input-row promote-ignore" style="display: none;">
<textarea name="additionalInfo" rows="3"
placeholder="Enter paths to ignore from promote, separated by line-break. \nEg: /<org>/<site>/<exp>/<path-to-file>"></textarea>
<input type="text" class="path-input" name="path" placeholder="Enter Experience Path" value="/sukamat/da-bacom-graybox/summit25" @input=${this.validateInput} />
<button class="primary" @click=${this.handleClear}>Clear</button>
</div>
<div class="checkbox-container">
<input type="checkbox" id="promoteIgnore" name="promoteIgnore" @change=${this.toggleTextArea}>
<div class="input-row">
<input type="checkbox" id="promoteIgnore" name="promoteIgnore" @change=${this.togglePromoteIgnore}>
<label for="promoteIgnore">Paths to ignore from promote?</label>
<input type="checkbox" id="publish" name="publish" disabled>
<label for="publish">Publish files after promote?</label>
<label for="publish">Publish files after promote?</label>
</div>
<div class="button-row">
<button class="accent" .disabled=${!this._canPromote} @click=${this.handlePromoteExperience}>Promote</button>
<button class="primary" @click=${this.handleCancel}>Cancel</button>
</div>
` : nothing}

<!-- Option #2: Promote Graybox Paths -->
${this.promoteIgnore === true ? html`
<div class="input-row promote-ignore">
<textarea class="path-list" name="additionalInfo" rows="3"
placeholder="Enter paths to ignore from promote, separated by line-break. Eg:/<org>/<site>/<exp>/<path-to-file>"></textarea>
<button class="primary" @click=${this.handleClear}>Clear</button>
</div>` : nothing}
<div class="button-row">
<button class="accent" .disabled=${!this._canPromote} @click=${this.handlePromoteExperience}>Promote</button>
</div>
` : nothing}
${this.selectedOption === 'promotePaths' ? html`
<div class="input-row">
<textarea name="promotePaths" rows="3" placeholder="Enter graybox paths to promote, separated by line-break" @input=${this.validateInputPaths}></textarea>
<button class="primary" @click=${this.handleClear}>Clear</button>
</div>
<div class="button-row">
<button class="accent" .disabled=${!this._canPromotePaths} @click=${this.handlePromotePaths}>Promote</button>
<button class="primary" @click=${this.handleCancel}>Cancel</button>
</div>
</div>
` : nothing}
</form>
${this._invalidInput ? this.renderError() : nothing}
Expand Down
Loading