Skip to content

Commit

Permalink
WEBDEV-6276 Added custom slot for result-cta-tiles (#323)
Browse files Browse the repository at this point in the history 
 WEBDEV-6276 Added custom slot for result-cta-tiles.
  • Loading branch information
@nsharma123
nsharma123 authored Nov 10, 2023
1 parent c3e3bef commit 85ef818
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 88 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@internetarchive/histogram-date-range": "^1.1.0",
"@internetarchive/ia-activity-indicator": "^0.0.4",
"@internetarchive/ia-dropdown": "^1.1.0",
"@internetarchive/infinite-scroller": "^1.0.0",
"@internetarchive/infinite-scroller": "1.0.1",
"@internetarchive/local-cache": "^0.2.1",
"@internetarchive/modal-manager": "^0.2.8",
"@internetarchive/search-service": "^1.2.3",
Expand Down
241 changes: 159 additions & 82 deletions src/app-root.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,91 +229,93 @@ export class AppRoot extends LitElement {
>
</div>
<div id="cell-controls" class="hidden">
<div id="cell-size-control">
<div>
<label for="cell-width-slider">Min cell width:</label>
<input
type="range"
min="10"
max="100"
value="18"
step="0.1"
id="cell-width-slider"
@input=${this.widthChanged}
/>
<span>${this.cellWidth}rem</span>
</div>
<div>
<label for="cell-height-slider">Cell height:</label>
<input
type="range"
min="10"
max="100"
value="29"
step="0.1"
id="cell-height-slider"
@input=${this.heightChanged}
/>
<span>${this.cellHeight}rem</span>
</div>
<fieldset class="cell-controls">
<legend>Cell Controls</legend>
<div>
<label for="cell-width-slider">Cell width:</label>
<input
type="range"
min="10"
max="100"
value="18"
step="0.1"
id="cell-width-slider"
@input=${this.widthChanged}
/>
<span>${this.cellWidth}rem</span>
</div>
<div id="cell-gap-control">
<div>
<label for="cell-row-gap-slider">Row gap:</label>
<input
type="range"
min="0"
max="5"
value="1.7"
step="0.1"
id="cell-row-gap-slider"
@input=${this.rowGapChanged}
/>
<span>${this.rowGap}rem</span>
</div>
<div>
<label for="cell-col-gap-slider">Col gap:</label>
<input
type="range"
min="0"
max="5"
value="1.7"
step="0.1"
id="cell-col-gap-slider"
@input=${this.colGapChanged}
/>
<span>${this.colGap}rem</span>
</div>
<div>
<label for="cell-height-slider">Cell height:</label>
<input
type="range"
min="10"
max="100"
value="29"
step="0.1"
id="cell-height-slider"
@input=${this.heightChanged}
/>
<span>${this.cellHeight}rem</span>
</div>
</div>
<div id="checkbox-controls">
<div>
<label for="cell-row-gap-slider">Row gap:</label>
<input
type="range"
min="0"
max="5"
value="1.7"
step="0.1"
id="cell-row-gap-slider"
@input=${this.rowGapChanged}
/>
<span>${this.rowGap}rem</span>
</div>
<div>
<label for="cell-col-gap-slider">Col gap:</label>
<input
type="range"
min="0"
max="5"
value="1.7"
step="0.1"
id="cell-col-gap-slider"
@input=${this.colGapChanged}
/>
<span>${this.colGap}rem</span>
</div>
</fieldset>
<fieldset class="other-controls">
<legend>Other Controls</legend>
<div class="checkbox-control">
<input
type="checkbox"
id="show-outline-check"
@click=${this.outlineChanged}
id="simulate-login"
@click=${this.loginChanged}
/>
<label for="show-outline-check">Show cell outlines</label>
<label for="simulate-login">Simulate login</label>
</div>
<div class="checkbox-control">
<input
type="checkbox"
id="show-facet-group-outline-check"
@click=${this.toggleFacetGroupOutline}
id="enable-date-picker"
checked
@click=${this.datePickerChanged}
/>
<label for="show-facet-group-outline-check">
Show facet group outlines
</label>
<label for="enable-date-picker">Enable date picker</label>
</div>
<div class="checkbox-control">
<input
type="checkbox"
id="simulate-login"
@click=${this.loginChanged}
id="enable-management"
@click=${this.manageModeCheckboxChanged}
/>
<label for="simulate-login">Simulate login</label>
<label for="enable-management">Enable manage mode</label>
</div>
</fieldset>
<fieldset class="cb-visual-appearance">
<legend>CB Visual Appearance</legend>
<div class="checkbox-control">
<input
type="checkbox"
Expand All @@ -325,27 +327,34 @@ export class AppRoot extends LitElement {
<div class="checkbox-control">
<input
type="checkbox"
id="enable-date-picker"
checked
@click=${this.datePickerChanged}
id="show-facet-group-outline-check"
@click=${this.toggleFacetGroupOutline}
/>
<label for="enable-date-picker">Enable date picker</label>
<label for="show-facet-group-outline-check">
Show facet group outlines
</label>
</div>
<div class="checkbox-control">
<input
type="checkbox"
id="enable-management"
@click=${this.manageModeCheckboxChanged}
id="show-outline-check"
@click=${this.outlineChanged}
/>
<label for="enable-management">Enable manage mode</label>
<label for="show-outline-check">Show cell outlines</label>
</div>
</fieldset>
<fieldset class="user-profile-controls">
<legend>User Profile Controls</legend>
<div class="checkbox-control">
<input
type="checkbox"
id="enable-facet-top-view"
@click=${this.facetTopViewCheckboxChanged}
id="enable-result-last-tile-view"
@click=${this.resultLastTileViewCheckboxChanged}
/>
<label for="enable-facet-top-view">Show facet top view</label>
<label for="enable-result-last-tile-view"
>Show result last tile view</label
>
</div>
<div class="checkbox-control">
<input
Expand All @@ -355,7 +364,15 @@ export class AppRoot extends LitElement {
/>
<label for="enable-cb-top-view">Show CB top view</label>
</div>
</div>
<div class="checkbox-control">
<input
type="checkbox"
id="enable-facet-top-view"
@click=${this.facetTopViewCheckboxChanged}
/>
<label for="enable-facet-top-view">Show facet top view</label>
</div>
</fieldset>
</div>
<button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
Toggle Search Controls
Expand Down Expand Up @@ -558,6 +575,26 @@ export class AppRoot extends LitElement {
}
}

private resultLastTileViewCheckboxChanged(e: Event) {
const target = e.target as HTMLInputElement;

const div = document.createElement('div');
const title = document.createElement('h3');
title.textContent = 'Upload';

div.setAttribute('slot', 'result-last-tile');
div.setAttribute('class', 'result-last-tile');
div.appendChild(title);

if (target.checked) {
this.collectionBrowser.appendChild(div);
} else {
this.collectionBrowser.removeChild(
this.collectionBrowser.lastElementChild as Element
);
}
}

/**
* Handler for when the dev panel's "Show cb top view" checkbox is changed.
*/
Expand Down Expand Up @@ -706,7 +743,6 @@ export class AppRoot extends LitElement {
padding: 0.5rem 1rem;
border: 1px solid black;
font-size: 1.4rem;
width: 75%;
background: #ffffffb3;
}
Expand Down Expand Up @@ -749,11 +785,17 @@ export class AppRoot extends LitElement {
margin-right: 1rem;
}
#cell-controls {
.cell-controls {
display: flex;
flex-wrap: wrap;
}
.cell-controls div {
display: flex;
align-items: center;
}
.cell-controls input[type='range'] {
width: 120px;
}
#cell-controls label {
display: inline-block;
width: 10rem;
Expand All @@ -777,6 +819,9 @@ export class AppRoot extends LitElement {
.checkbox-control {
flex-basis: 50%;
}
.checkbox-control label {
user-select: none;
}
#last-event {
background-color: aliceblue;
Expand All @@ -799,5 +844,37 @@ export class AppRoot extends LitElement {
background-color: aliceblue;
font-size: 1.6rem;
}
/* user profile controls */
.user-profile-controls {
width: fit-content;
}
fieldset {
display: inline-block !important;
}
.result-last-tile {
border-radius: 4px;
background-color: white;
border: 3px dashed #555;
box-shadow: none;
display: grid;
align-content: center;
}
.result-last-tile:hover {
box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
transition: box-shadow 0.1s ease 0s;
cursor: pointer;
border: 3px dashed #4b64ff;
}
.result-last-tile h3 {
margin-bottom: 4rem;
margin: 0px auto;
font-size: 2.8rem;
color: rgb(44, 44, 44);
font-weight: 200;
text-align: center;
}
`;
}
5 changes: 4 additions & 1 deletion src/collection-browser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,10 @@ export class CollectionBrowser
.placeholderCellTemplate=${this.placeholderCellTemplate}
@scrollThresholdReached=${this.scrollThresholdReached}
@visibleCellsChanged=${this.visibleCellsChanged}
></infinite-scroller>`;
>${this.displayMode === 'grid'
? html`<slot name="result-last-tile" slot="result-last-tile"></slot>`
: nothing}
</infinite-scroller>`;
}

private get infiniteScrollerClasses() {
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,10 +152,10 @@
dependencies:
lit "^2.0.2"

"@internetarchive/infinite-scroller@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@internetarchive/infinite-scroller/-/infinite-scroller-1.0.0.tgz#3409fa97b37b15e768a265293326e21ce541028c"
integrity sha512-B3Eo4uB4sHu4B+i3hArLCFcPC9bDCbLnatjkNqoMMGWQJlVvfFbyiDWaO2WJd5mZp640sc5xdrF09uy9Lbw+hw==
"@internetarchive/[email protected].1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@internetarchive/infinite-scroller/-/infinite-scroller-1.0.1.tgz#bfe6cb0e3243219e442574b42cf1b5fbb3fe5800"
integrity sha512-wzl7bQLidNZ4uXgP0H8AA3HoAXxueoHaVcpgQMXR7bspHKGvgLy8EvLbprBps1dFNK5yZRH9PHdLRtJgpcWKtQ==
dependencies:
lit "^2.0.2"

Expand Down

0 comments on commit 85ef818

Please sign in to comment.