Skip to content

Commit

Permalink
refactor: combined reduntant tab and list code into one component - t…
Browse files Browse the repository at this point in the history 
…ools-items
  • Loading branch information
@srijitcoder
srijitcoder committed Sep 13, 2024
1 parent d491189 commit ff27c6b
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 204 deletions.
58 changes: 27 additions & 31 deletions elements/layercontrol/src/components/layer-tools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import { when } from "lit/directives/when.js";
import { live } from "lit/directives/live.js";
import "./layer-config";
import "./layer-datetime";
import "./tabs";
import "./list";
import "./tools-items";
import { button } from "../../../../utils/styles/button";
import { radio } from "../../../../utils/styles/radio";
import { checkbox } from "../../../../utils/styles/checkbox";
Expand Down Expand Up @@ -194,28 +193,19 @@ export class EOxLayerControlLayerTools extends LitElement {
<summary>
<button class="icon ${iconClass}">Tools</button>
</summary>
${when(
this.disableTabs,
() => html` <eox-layercontrol-list
.noShadow=${false}
.listitems=${tools}
.unstyled=${this.unstyled}
>
<!-- Including default tools -->
${this._getDefaultTools()}
</eox-layercontrol-list>`,
() => html` <eox-layercontrol-tabs
.noShadow=${false}
.actions=${actions}
.tabs=${tools}
.unstyled=${this.unstyled}
>
<!-- Rendering tabs and content -->
${map(tools, (tool) => this._button(tool))}
<!-- Including default tools -->
${this._getDefaultTools()}
</eox-layercontrol-tabs>`
)}
<eox-layercontrol-tools-items
class="${this.disableTabs ? "tools-list" : "tools-tab"}"
.noShadow=${false}
.actions=${actions}
.tabs=${tools}
.unstyled=${this.unstyled}
.disableTabs=${this.disableTabs}
>
<!-- Rendering tabs and content -->
${map(tools, (tool) => this._button(tool))}
<!-- Including default tools -->
${this._getDefaultTools()}
</eox-layercontrol-tools-items>
</details>
`
)}
Expand Down Expand Up @@ -265,21 +255,27 @@ export class EOxLayerControlLayerTools extends LitElement {
}
.single-action,
details.tools summary,
eox-layercontrol-tabs button.icon {
eox-layercontrol-tools-items button.icon {
transition: opacity .2s;
}
.single-action,
details.tools summary {
opacity: .5;
}
eox-layercontrol-tabs button.icon {
eox-layercontrol-tools-items button.icon {
opacity: .7;
}
eox-layercontrol-tools-items.tools-list button.icon {
cursor: auto;
}
.single-action:hover,
details.tools summary:hover,
eox-layercontrol-tabs button.icon:hover {
eox-layercontrol-tools-items button.icon:hover {
opacity: 1;
}
eox-layercontrol-tools-items.tools-list button.icon:hover {
opacity: .7;
}
.tools-placeholder,
.single-action .icon,
.single-action .icon::before,
Expand All @@ -288,13 +284,13 @@ export class EOxLayerControlLayerTools extends LitElement {
height: 16px;
width: 16px;
}
eox-layercontrol-tabs button.icon,
eox-layercontrol-tabs .button.icon {
eox-layercontrol-tools-items button.icon,
eox-layercontrol-tools-items .button.icon {
display: flex;
justify-content: center;
}
eox-layercontrol-tabs button.icon::before,
eox-layercontrol-tabs .button.icon::before {
eox-layercontrol-tools-items button.icon::before,
eox-layercontrol-tools-items .button.icon::before {
width: 16px;
height: 16px;
}
Expand Down
137 changes: 0 additions & 137 deletions elements/layercontrol/src/components/list.js
View file

This file was deleted.

90 changes: 59 additions & 31 deletions elements/layercontrol/src/components/tabs.js → ...ayercontrol/src/components/tools-items.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export class EOxLayerControlTabs extends LitElement {
tabs: { attribute: false },
unstyled: { type: Boolean },
noShadow: { type: Boolean },
disableTabs: { type: Boolean },
};

constructor() {
Expand Down Expand Up @@ -44,6 +45,13 @@ export class EOxLayerControlTabs extends LitElement {
* @type {Boolean}
*/
this.noShadow = false;

/**
* If enabled, the tools section will be rendered as list.
*
* @type {Boolean}
*/
this.disableTabs = false;
}

/**
Expand All @@ -54,7 +62,8 @@ export class EOxLayerControlTabs extends LitElement {
}

/** @param {number} index */
#labelHighlightClass = (index) => this.selectedTab === index && "highlighted";
#labelHighlightClass = (index) =>
(this.selectedTab === index || this.disableTabs) && "highlighted";

/**
* Renders a tabbed interface that displays tabs and corresponding content areas based on the provided 'tabs' and 'actions'.
Expand All @@ -76,35 +85,40 @@ export class EOxLayerControlTabs extends LitElement {
isListAvail,
() => html`
<nav>
<div>
<!-- Labels for tabs -->
${map(
tabs,
(tab, index) =>
html`
<label
class=${this.#labelHighlightClass(index)}
@click=${() => (this.selectedTab = index)}
>
<!-- Customizable icon for each tab -->
<slot name=${`${tab}-icon`}>${tab}</slot>
</label>
`
)}
</div>
<div>
<!-- Icons for actions -->
${map(
actions,
(action) =>
html`
<span>
<!-- Customizable icon for each action -->
<slot name=${`${action}-icon`}>${action}</slot>
</span>
`
)}
</div>
${when(
!this.disableTabs,
() => html`
<div>
<!-- Labels for tabs -->
${map(
tabs,
(tab, index) =>
html`
<label
class=${this.#labelHighlightClass(index)}
@click=${() => (this.selectedTab = index)}
>
<!-- Customizable icon for each tab -->
<slot name=${`${tab}-icon`}>${tab}</slot>
</label>
`
)}
</div>
<div>
<!-- Icons for actions -->
${map(
actions,
(action) =>
html`
<span>
<!-- Customizable icon for each action -->
<slot name=${`${action}-icon`}>${action}</slot>
</span>
`
)}
</div>
`
)}
</nav>
`
)}
Expand All @@ -113,6 +127,15 @@ export class EOxLayerControlTabs extends LitElement {
${map(
tabs,
(tab, index) => html`
${when(
this.disableTabs,
() => html`
<label class="listed">
<!-- Customizable icon for each tab -->
<slot name=${`${tab}-icon`}>${tab}</slot>
</label>
`
)}
<div class="tab ${this.#labelHighlightClass(index)}">
<!-- Content slot for each tab -->
<slot name=${`${tab}-content`}>${tab}</slot>
Expand Down Expand Up @@ -147,6 +170,11 @@ export class EOxLayerControlTabs extends LitElement {
`;

#styleEOX = `
.listed {
background: #ffffff !important;
display: flex;
justify-content: end;
}
.tabbed {
font-size: small;
}
Expand All @@ -170,4 +198,4 @@ export class EOxLayerControlTabs extends LitElement {
`;
}

customElements.define("eox-layercontrol-tabs", EOxLayerControlTabs);
customElements.define("eox-layercontrol-tools-items", EOxLayerControlTabs);
2 changes: 1 addition & 1 deletion elements/layercontrol/stories/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ export { default as TabsStory } from "./tabs";
export { default as addExternalLayerStory } from "./add-external-layer";
export { default as layerZoomStateStory } from "./layer-zoom-state";
export { default as unstyledStory } from "./unstyled";
export { default as DisabledTabsStory } from "./disable-tabs";
export { default as disabledTabsStory } from "./disable-tabs";
4 changes: 2 additions & 2 deletions elements/layercontrol/stories/layercontrol.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
addExternalLayerStory,
layerDatetimeStory,
layerZoomStateStory,
DisabledTabsStory,
disabledTabsStory,
} from ".";

export default {
Expand Down Expand Up @@ -101,4 +101,4 @@ export const Unstyled = unstyledStory;
/**
* Tools rendered as list instead of tabs
*/
export const DisableTabs = DisabledTabsStory;
export const DisableTabs = disabledTabsStory;
Loading

0 comments on commit ff27c6b

Please sign in to comment.