mirror of https://github.com/zombieFox/voltTab.git
always visible bookmark icons
This commit is contained in:
zombieFox
parent
74b2a76740
commit
d5054a22c1
|
|
@ -2,7 +2,7 @@
|
|||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: calc(var(--bookmark-panel-size) * 1vmax) 1fr;
|
||||
grid-template-columns: calc(var(--bookmark-panel-size) * 1%) 1fr;
|
||||
align-items: center;
|
||||
z-index: var(--z-index-bookmark);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,21 +45,25 @@ export const Bookmark = function() {
|
|||
|
||||
this.node.group.classList.add('bookmark-group');
|
||||
|
||||
this.node.group.addEventListener('mouseleave', () => {
|
||||
if (!config.bookmark.alwaysVisible) {
|
||||
|
||||
config.bookmark.group.forEach(bookmarkGroup => {
|
||||
this.node.group.addEventListener('mouseleave', () => {
|
||||
|
||||
bookmarkGroup.active = false;
|
||||
config.bookmark.group.forEach(bookmarkGroup => {
|
||||
|
||||
bookmarkGroup.active = false;
|
||||
|
||||
});
|
||||
|
||||
this.node.allGroup.forEach(group => {
|
||||
|
||||
group.renderActive();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
this.node.allGroup.forEach(group => {
|
||||
|
||||
group.renderActive();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
this.node.panel.classList.add('bookmark-panel');
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
.bookmark-group-item {
|
||||
display: grid;
|
||||
grid-template-columns: calc(var(--bookmark-panel-size) * 1vmax) 1fr;
|
||||
grid-template-columns: calc(var(--bookmark-panel-size) * 1%) 1fr;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
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: 50%;
|
||||
height: 40%;
|
||||
transition: height var(--theme-transition-medium-bounce) calc((var(--theme-transition-speed-xfast) / 2) * 1s), background-color var(--theme-transition-medium-ease);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,25 +46,39 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
|
|||
|
||||
this.renderActive = () => {
|
||||
|
||||
bookmarkGroupData.active ? this.node.groupItem.classList.add('bookmark-group-active') : this.node.groupItem.classList.remove('bookmark-group-active');
|
||||
bookmarkGroupData.active ? this.active() : this.inactive();
|
||||
|
||||
}
|
||||
|
||||
this.active = () => this.node.groupItem.classList.add('bookmark-group-active')
|
||||
|
||||
this.inactive = () => this.node.groupItem.classList.remove('bookmark-group-active')
|
||||
|
||||
this.render = () => {
|
||||
|
||||
this.node.groupItem.classList.add('bookmark-group-item');
|
||||
|
||||
this.node.groupItem.addEventListener('mouseenter', () => {
|
||||
if (config.bookmark.alwaysVisible) {
|
||||
|
||||
this.toggleActiveState();
|
||||
this.node.groupItem.classList.add('bookmark-group-active');
|
||||
|
||||
allBookmarkGroup.forEach(group => {
|
||||
} else {
|
||||
|
||||
group.renderActive();
|
||||
this.node.groupItem.addEventListener('mouseenter', () => {
|
||||
|
||||
this.toggleActiveState();
|
||||
|
||||
allBookmarkGroup.forEach(group => {
|
||||
|
||||
group.renderActive();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
this.renderActive();
|
||||
|
||||
};
|
||||
|
||||
this.node.tab.classList.add('bookmark-group-tab');
|
||||
|
||||
|
|
@ -72,8 +86,6 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
|
|||
|
||||
this.node.tab.href = "#";
|
||||
|
||||
this.renderActive();
|
||||
|
||||
this.style();
|
||||
|
||||
this.node.label.classList.add('bookmark-group-label');
|
||||
|
|
|
|||
248
src/config.js
248
src/config.js
|
|
@ -1,121 +1,195 @@
|
|||
export const config = {
|
||||
bookmark: {
|
||||
newTab: true, // open the bookmarks in a new tab: true or false
|
||||
|
||||
// open the bookmarks in a new tab: true or false
|
||||
newTab: true, // boolean: true|false
|
||||
|
||||
// bookmark icons show when a bookmark group gains focus or on cursor hover
|
||||
// if set to true bookmarks are always shown
|
||||
alwaysVisible: false, // boolean: true|false
|
||||
|
||||
// bookmark left side panel
|
||||
// area contains bookmark group name, description and open all button
|
||||
panel: {
|
||||
size: 35 // width of the left panel, range from 0 to 100
|
||||
// width of the left panel
|
||||
size: 35 // range: min:0|max:100
|
||||
},
|
||||
group: [ // each object in this array is a bookmark group
|
||||
// add as many objects { ... } as needed to bookmark group array
|
||||
{
|
||||
name: 'Productivity', // group name
|
||||
description: 'Daily apps', // group description
|
||||
color: {
|
||||
primary: { hsl: [0, 0, 100] }, // colour for group name and icons
|
||||
secondary: { hsl: [200, 60, 70] } // colour for group description and the open all button
|
||||
},
|
||||
list: [
|
||||
// list of bookmarks in this group
|
||||
// add as many links as needed to he list array
|
||||
// the first key can be any of the following types: icon or letter or image
|
||||
|
||||
// icon eg:
|
||||
// use a Font Awesome class name found on https://fontawesome.com/icons
|
||||
// { icon: 'fa-solid fa-envelope', url: 'https://website.com/' },
|
||||
// bookmark grouping
|
||||
// each object in this array definesa group
|
||||
// add as many objects as needed
|
||||
// each group contains any number of bookmarks
|
||||
group: [{
|
||||
|
||||
// letter eg:
|
||||
// { letter: 'ABC', url: 'https://website.com/' },
|
||||
// bookmark group name
|
||||
name: 'Productivity',
|
||||
|
||||
// image eg:
|
||||
// { image: 'https://example.com/image.jpg', url: 'https://website.com/' },
|
||||
// bookmark group description
|
||||
description: 'Daily apps',
|
||||
|
||||
{ icon: 'fa-solid fa-envelope', url: 'https://mail.google.com/' },
|
||||
{ icon: 'fa-brands fa-slack', url: 'https://slack.com/signin/' },
|
||||
{ icon: 'fa-brands fa-github', url: 'https://github.com/' },
|
||||
{ icon: 'fa-brands fa-codepen', url: 'https://codepen.io/' },
|
||||
{ icon: 'fa-solid fa-diamond', url: 'https://whimsical.com/login/' },
|
||||
{ icon: 'fa-brands fa-figma', url: 'https://figma.com/' },
|
||||
{ icon: 'fa-brands fa-dropbox', url: 'https://dropbox.com/' },
|
||||
{ icon: 'fa-brands fa-google-drive', url: 'https://drive.google.com/' },
|
||||
{ icon: 'fa-solid fa-calendar-day', url: 'https://calendar.google.com/calendar/' },
|
||||
]
|
||||
// bookmark colours
|
||||
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
color: {
|
||||
primary: { hsl: [0, 0, 100] }, // colour for group name and icons
|
||||
secondary: { hsl: [200, 60, 70] } // colour for group description and the open all button
|
||||
},
|
||||
{
|
||||
name: 'Cool stuff',
|
||||
description: 'Downtime and media',
|
||||
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [250, 60, 70] } },
|
||||
list: [
|
||||
{ icon: 'fa-brands fa-reddit-alien', url: 'https://reddit.com/' },
|
||||
{ icon: 'fa-brands fa-deviantart', url: 'https://www.deviantart.com/' },
|
||||
{ icon: 'fa-brands fa-discord', url: 'https://discord.com/' },
|
||||
{ icon: 'fa-solid fa-paperclip', url: 'https://www.decisionproblem.com/paperclips/' },
|
||||
{ icon: 'fa-solid fa-dice-d20', url: 'https://zombiefox.github.io/diceRoller/' },
|
||||
{ icon: 'fa-brands fa-dribbble', url: 'https://dribbble.com/' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Entertainment',
|
||||
description: 'Films and videos',
|
||||
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [0, 60, 70] } },
|
||||
list: [
|
||||
{ icon: 'fa-brands fa-vimeo', url: 'https://vimeo.com/' },
|
||||
{ icon: 'fa-brands fa-youtube', url: 'https://youtube.com/' },
|
||||
{ icon: 'fa-solid fa-clapperboard', url: 'https://netflix.com/' },
|
||||
{ icon: 'fa-brands fa-twitch', url: 'https://www.twitch.tv/' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ref',
|
||||
description: 'Docs, code + specs',
|
||||
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [40, 60, 70] } },
|
||||
list: [
|
||||
{ icon: 'fa-solid fa-code', url: 'https://devdocs.io/' },
|
||||
{ icon: 'fa-brands fa-css3-alt', url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/' },
|
||||
{ icon: 'fa-brands fa-stack-overflow', url: 'https://stackoverflow.com/' },
|
||||
{ icon: 'fa-brands fa-bootstrap', url: 'https://getbootstrap.com/docs/5.2/getting-started/introduction/' },
|
||||
{ icon: 'fa-brands fa-npm', url: 'https://www.npmjs.com/' },
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
list: [
|
||||
// list of bookmarks in this group
|
||||
// add as many objects as needed
|
||||
// the first key defines the visual element of the bookmark
|
||||
// string: icon|letter|image
|
||||
|
||||
// icon eg:
|
||||
// use a Font Awesome class name found on https://fontawesome.com/icons
|
||||
// { icon: 'fa-solid fa-envelope', url: 'https://website.com/' },
|
||||
|
||||
// letter eg:
|
||||
// { letter: 'ABC', url: 'https://website.com/' },
|
||||
|
||||
// image eg:
|
||||
// { image: 'https://example.com/image.jpg', url: 'https://website.com/' },
|
||||
|
||||
{ icon: 'fa-solid fa-envelope', url: 'https://mail.google.com/' },
|
||||
{ icon: 'fa-brands fa-slack', url: 'https://slack.com/signin/' },
|
||||
{ icon: 'fa-brands fa-github', url: 'https://github.com/' },
|
||||
{ icon: 'fa-brands fa-codepen', url: 'https://codepen.io/' },
|
||||
{ icon: 'fa-solid fa-diamond', url: 'https://whimsical.com/login/' },
|
||||
{ icon: 'fa-brands fa-figma', url: 'https://figma.com/' },
|
||||
{ icon: 'fa-brands fa-dropbox', url: 'https://dropbox.com/' },
|
||||
{ icon: 'fa-brands fa-google-drive', url: 'https://drive.google.com/' },
|
||||
{ icon: 'fa-solid fa-calendar-day', url: 'https://calendar.google.com/calendar/' },
|
||||
]
|
||||
|
||||
}, {
|
||||
name: 'Cool stuff',
|
||||
description: 'Downtime and media',
|
||||
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [250, 60, 70] } },
|
||||
list: [
|
||||
{ icon: 'fa-brands fa-reddit-alien', url: 'https://reddit.com/' },
|
||||
{ icon: 'fa-brands fa-deviantart', url: 'https://www.deviantart.com/' },
|
||||
{ icon: 'fa-brands fa-discord', url: 'https://discord.com/' },
|
||||
{ icon: 'fa-solid fa-paperclip', url: 'https://www.decisionproblem.com/paperclips/' },
|
||||
{ icon: 'fa-solid fa-dice-d20', url: 'https://zombiefox.github.io/diceRoller/' },
|
||||
{ icon: 'fa-brands fa-dribbble', url: 'https://dribbble.com/' },
|
||||
]
|
||||
}, {
|
||||
name: 'Entertainment',
|
||||
description: 'Films and videos',
|
||||
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [0, 60, 70] } },
|
||||
list: [
|
||||
{ icon: 'fa-brands fa-vimeo', url: 'https://vimeo.com/' },
|
||||
{ icon: 'fa-brands fa-youtube', url: 'https://youtube.com/' },
|
||||
{ icon: 'fa-solid fa-clapperboard', url: 'https://netflix.com/' },
|
||||
{ icon: 'fa-brands fa-twitch', url: 'https://www.twitch.tv/' },
|
||||
]
|
||||
}, {
|
||||
name: 'Ref',
|
||||
description: 'Docs, code + specs',
|
||||
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [40, 60, 70] } },
|
||||
list: [
|
||||
{ icon: 'fa-solid fa-code', url: 'https://devdocs.io/' },
|
||||
{ icon: 'fa-brands fa-css3-alt', url: 'https://developer.mozilla.org/en-US/docs/Learn/CSS/' },
|
||||
{ icon: 'fa-brands fa-stack-overflow', url: 'https://stackoverflow.com/' },
|
||||
{ icon: 'fa-brands fa-bootstrap', url: 'https://getbootstrap.com/docs/5.2/getting-started/introduction/' },
|
||||
{ icon: 'fa-brands fa-npm', url: 'https://www.npmjs.com/' },
|
||||
]
|
||||
}]
|
||||
|
||||
},
|
||||
|
||||
theme: {
|
||||
scale: 38, // global scale
|
||||
accent: { hsl: [204, 100, 72] }, // accent colour, not used for much yet, colour using hsl: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
text: { hsl: [0, 0, 0] }, // text colour, not used for much yet, colour using hsl: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
font: 'Ubuntu', // use the full name of any font found on Google Fonts: https://fonts.google.com/
|
||||
transition: { speed: { xfast: 10, fast: 20, medium: 30, slow: 40, xslow: 50 } }, // the speed of the different transitions
|
||||
easing: { bounce: [0.8, 0.5, 0.2, 2] }, // the bounce transition easing bezier curve
|
||||
|
||||
// global scale
|
||||
scale: 38, // range: min:0|max:100
|
||||
|
||||
// accent colours
|
||||
// not used for much yet, this should be developed as the project grows
|
||||
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
accent: { hsl: [204, 100, 72] },
|
||||
|
||||
// text colours
|
||||
// not used for much yet, this should be developed as the project grows
|
||||
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
text: { hsl: [0, 0, 0] },
|
||||
|
||||
// text font
|
||||
// works with Google Fonts: https://fonts.google.com/
|
||||
// enter the full name of a font as it is displayed on Google Fonts
|
||||
font: 'Ubuntu',
|
||||
|
||||
// the speed of the different transitions
|
||||
transition: { speed: { xfast: 10, fast: 20, medium: 30, slow: 40, xslow: 50 } }, // range: min:0|max:*
|
||||
|
||||
// the bounce transition easing bezier curve
|
||||
easing: { bounce: [0.8, 0.5, 0.2, 2] }, // range: min:0|max:*
|
||||
|
||||
bookmark: {
|
||||
background: {
|
||||
blur: 14, // bookmark left panel blur amount
|
||||
color: { hsla: [200, 180, 25, 0.2] } // bookmark left panel colour using hsla: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
|
||||
|
||||
// bookmark left side panel background blur amount
|
||||
blur: 14, // range: min:0|max:*
|
||||
|
||||
// bookmark left side panel background colour
|
||||
// colour defined with HSLA: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
|
||||
color: { hsla: [200, 180, 25, 0.2] }
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
background: {
|
||||
|
||||
// the background is made of three layers
|
||||
// colour at the bottom
|
||||
// an image above the colour layer
|
||||
// a gradient above the image layer
|
||||
|
||||
// background layer 1 (bottom)
|
||||
// colour defined with HSL: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
color: {
|
||||
hsl: [220, 30, 50] //background colour using hsl: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
hsl: [220, 30, 50]
|
||||
},
|
||||
|
||||
// background layer 2 (middle)
|
||||
image: {
|
||||
|
||||
url: 'https://i.redd.it/niecy4jmlmh81.png', // background image url
|
||||
opacity: 1, // opacity of background image, range from 0.0 to 1.0
|
||||
grayscale: 0.1, // grayscale of background image, range from 0.0 to 1.0
|
||||
blur: 0 // blur of background image
|
||||
|
||||
// opacity of background image
|
||||
opacity: 1, // range: min:0|max:1
|
||||
|
||||
// grayscale of background image
|
||||
grayscale: 0.1, // range: min:0|max:1
|
||||
|
||||
// blur of background image
|
||||
blur: 0 // range: min:0|max:*
|
||||
|
||||
},
|
||||
|
||||
// background layer 3 (top)
|
||||
gradient: {
|
||||
degree: 90, // gradient angle
|
||||
|
||||
// gradient angle
|
||||
degree: 90, // range: min:0|max:360
|
||||
|
||||
color: [
|
||||
// the colour array lists the different colour stops of the gradient
|
||||
// each colour is hsla: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
|
||||
// the position is the location of the colour stop, range from 1 to 100
|
||||
// add as many colour objects { ... } as needed
|
||||
{ hsla: [220, 80, 18, 0.6], position: 30 },
|
||||
// gradient colours
|
||||
// each object is a single colour and position in the gradient layer
|
||||
// the position value defines the location of the colour stop
|
||||
// each stop should not be a lower value than the previous stop
|
||||
// eg: {..., position: 40}, {..., position: 60}, {..., position: 90},
|
||||
// add as many objects as needed
|
||||
{
|
||||
// colour defined with HSLA: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
|
||||
hsla: [220, 80, 18, 0.6],
|
||||
position: 30 // range: min:0|max:100
|
||||
},
|
||||
{ hsla: [240, 85, 25, 0.4], position: 40 },
|
||||
{ hsla: [280, 40, 25, 0.1], position: 100 }
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue