extras
/
voltTab
mirror of https://github.com/zombieFox/voltTab.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

improve open all component

This commit is contained in:
zombieFox 2022-05-23 23:01:31 +01:00
parent d5054a22c1
commit 9decb07ccf
4 changed files with 81 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/component/BookmarkGroup/index.css
View File

@ -75,48 +75,6 @@
calc(var(--bookmark-group-color-secondary-hsl-l) * 1%));
}
.bookmark-group-indicator {
flex-shrink: 0;
position: relative;
display: block;
width: 0.25em;
height: 100%;
}
.bookmark-group-indicator-top,
.bookmark-group-indicator-bottom {
width: 100%;
height: 0;
display: block;
position: absolute;
left: 50%;
border-radius: 1em;
transform: translateX(-50%);
background-color: hsl(var(--bookmark-group-color-secondary-hsl-h),
calc((var(--bookmark-group-color-secondary-hsl-s) - 30) * 1%),
calc((var(--bookmark-group-color-secondary-hsl-l) - 20) * 1%));
transition: height var(--theme-transition-fast-ease), background-color var(--theme-transition-medium-ease);
}
.bookmark-group-indicator-top {
bottom: calc(50% + 1.5em);
}
.bookmark-group-indicator-bottom {
top: calc(50% + 1.5em);
}
.bookmark-group-item:focus-within .bookmark-group-indicator-top,
.bookmark-group-item:focus-within .bookmark-group-indicator-bottom,
.bookmark-group-active .bookmark-group-indicator-top,
.bookmark-group-active .bookmark-group-indicator-bottom {
background-color: hsl(var(--bookmark-group-color-secondary-hsl-h),
calc(var(--bookmark-group-color-secondary-hsl-s) * 1%),
calc(var(--bookmark-group-color-secondary-hsl-l) * 1%));
height: 40%;
transition: height var(--theme-transition-medium-bounce) calc((var(--theme-transition-speed-xfast) / 2) * 1s), background-color var(--theme-transition-medium-ease);
}
.bookmark-group-list {
display: flex;
flex-wrap: wrap;

17
src/component/BookmarkGroup/index.js
View File

@ -12,9 +12,6 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
label: document.createElement('div'),
name: document.createElement('p'),
description: document.createElement('p'),
indicator: document.createElement('div'),
indicatorTop: document.createElement('span'),
indicatorBottom: document.createElement('span'),
list: document.createElement('div'),
openAll: null,
allList: []
@ -94,12 +91,6 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
this.node.description.classList.add('bookmark-group-description');
this.node.indicator.classList.add('bookmark-group-indicator');
this.node.indicatorTop.classList.add('bookmark-group-indicator-top');
this.node.indicatorBottom.classList.add('bookmark-group-indicator-bottom');
this.node.name.textContent = bookmarkGroupData.name;
this.node.description.textContent = bookmarkGroupData.description;
@ -126,13 +117,7 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
this.node.tab.appendChild(this.node.label);
this.node.indicator.appendChild(this.node.openAll.button());
this.node.indicator.appendChild(this.node.indicatorTop);
this.node.indicator.appendChild(this.node.indicatorBottom);
this.node.tab.appendChild(this.node.indicator);
this.node.tab.appendChild(this.node.openAll.openAll());
this.node.groupItem.appendChild(this.node.tab);

65
src/component/BookmarkOpenAll/index.css
View File

@ -1,4 +1,9 @@
.bookmark-open-all {
align-self: stretch;
position: relative;
}
.bookmark-open-all-button {
background-color: transparent;
border: 0;
position: absolute;
@ -14,23 +19,65 @@
transition: color var(--theme-transition-xfast-ease), transform var(--theme-transition-fast-ease) calc(var(--theme-transition-speed-fast) * 1s);
}
.bookmark-group-item:focus-within .bookmark-open-all,
.bookmark-group-active .bookmark-open-all {
.bookmark-group-item:focus-within .bookmark-open-all-button,
.bookmark-group-active .bookmark-open-all-button {
transform: translate(-50%, -50%) scale(1);
transition: color var(--theme-transition-xfast-ease), transform var(--theme-transition-xslow-bounce) 0s;
}
.bookmark-group-item:focus-within .bookmark-open-all:hover,
.bookmark-group-item:focus-within .bookmark-open-all:focus,
.bookmark-group-active .bookmark-open-all:hover,
.bookmark-group-active .bookmark-open-all:focus {
.bookmark-group-item:focus-within .bookmark-open-all-button:hover,
.bookmark-group-item:focus-within .bookmark-open-all-button:focus,
.bookmark-group-active .bookmark-open-all-button:hover,
.bookmark-group-active .bookmark-open-all-button:focus {
outline: none;
transform: translate(-50%, -50%) scale(1.4);
transition: transform var(--theme-transition-fast-bounce);
}
.bookmark-group-item:focus-within .bookmark-open-all:active,
.bookmark-group-active .bookmark-open-all:active {
.bookmark-group-item:focus-within .bookmark-open-all-button:active,
.bookmark-group-active .bookmark-open-all-button:active {
transform: translate(-50%, -50%) scale(1);
transition: transform var(--theme-transition-fast-bounce);
}
}
.bookmark-open-all-line {
flex-shrink: 0;
position: relative;
display: block;
width: 0.25em;
height: 100%;
}
.bookmark-open-all-line-top,
.bookmark-open-all-line-bottom {
width: 100%;
height: 0;
display: block;
position: absolute;
left: 50%;
border-radius: 1em;
transform: translateX(-50%);
background-color: hsl(var(--bookmark-group-color-secondary-hsl-h),
calc((var(--bookmark-group-color-secondary-hsl-s) - 30) * 1%),
calc((var(--bookmark-group-color-secondary-hsl-l) - 20) * 1%));
transition: height var(--theme-transition-fast-ease), background-color var(--theme-transition-medium-ease);
}
.bookmark-open-all-line-top {
bottom: calc(50% + 1.5em);
}
.bookmark-open-all-line-bottom {
top: calc(50% + 1.5em);
}
.bookmark-group-item:focus-within .bookmark-open-all-line-top,
.bookmark-group-item:focus-within .bookmark-open-all-line-bottom,
.bookmark-group-active .bookmark-open-all-line-top,
.bookmark-group-active .bookmark-open-all-line-bottom {
background-color: hsl(var(--bookmark-group-color-secondary-hsl-h),
calc(var(--bookmark-group-color-secondary-hsl-s) * 1%),
calc(var(--bookmark-group-color-secondary-hsl-l) * 1%));
height: 40%;
transition: height var(--theme-transition-medium-bounce) calc((var(--theme-transition-speed-xfast) / 2) * 1s), background-color var(--theme-transition-medium-ease);
}

28
src/component/BookmarkOpenAll/index.js
View File

@ -5,8 +5,12 @@ import './index.css';
export const BookmarkOpenAll = function(bookmarkGroupData) {
this.node = {
openAll: document.createElement('div'),
button: document.createElement('button'),
icon: document.createElement('span')
icon: document.createElement('span'),
line: document.createElement('div'),
lineTop: document.createElement('span'),
lineBottom: document.createElement('span')
}
this.open = () => {
@ -43,7 +47,9 @@ export const BookmarkOpenAll = function(bookmarkGroupData) {
this.render = () => {
this.node.button.classList.add('bookmark-open-all');
this.node.openAll.classList.add('bookmark-open-all');
this.node.button.classList.add('bookmark-open-all-button');
this.node.button.addEventListener('click', () => {
@ -55,10 +61,24 @@ export const BookmarkOpenAll = function(bookmarkGroupData) {
this.node.icon.classList.add('fa-solid');
this.node.line.classList.add('bookmark-open-all-line');
this.node.lineTop.classList.add('bookmark-open-all-line-top');
this.node.lineBottom.classList.add('bookmark-open-all-line-bottom');
this.node.line.appendChild(this.node.lineTop);
this.node.line.appendChild(this.node.lineBottom);
this.node.button.appendChild(this.node.icon);
this.node.openAll.appendChild(this.node.line);
this.node.openAll.appendChild(this.node.button);
}
this.button = () => this.node.button;
this.openAll = () => this.node.openAll;
}
}