From 101ea174e1a2ef7ab48eb9ebe3852ba195017228 Mon Sep 17 00:00:00 2001 From: boerdereinar Date: Tue, 21 May 2024 14:05:33 +0200 Subject: [PATCH] Add favorite indicator + modify file icon placement and link preview style in compact mode --- src/components/filePanoItem.ts | 8 +++++ src/components/linkPanoItem.ts | 3 +- src/components/panoItemOverlay.ts | 18 ++++++++++ src/styles/stylesheet.css | 58 ++++++++++++++++++++----------- src/utils/color.ts | 5 +-- 5 files changed, 68 insertions(+), 24 deletions(-) diff --git a/src/components/filePanoItem.ts b/src/components/filePanoItem.ts index 6cb97fab..eeff29db 100644 --- a/src/components/filePanoItem.ts +++ b/src/components/filePanoItem.ts @@ -281,6 +281,14 @@ export class FilePanoItem extends PanoItem { ); this.titleContainer.vertical = this.preview === null && !compactMode; + // Switch title and icon + if (compactMode !== (this.titleContainer.firstChild !== this.icon)) { + const children = this.titleContainer.get_children(); + this.titleContainer.remove_all_children(); + this.titleContainer.add_child(children[1]!); + this.titleContainer.add_child(children[0]!); + } + this.icon.visible = !isVisible(headerStyle); if (this.preview) { diff --git a/src/components/linkPanoItem.ts b/src/components/linkPanoItem.ts index bb125ac3..5fce597c 100644 --- a/src/components/linkPanoItem.ts +++ b/src/components/linkPanoItem.ts @@ -101,7 +101,6 @@ export class LinkPanoItem extends PanoItem { this.setStyle(); }); this.settings.connect('changed::header-style', this.setCompactMode.bind(this)); - this.settings.connect('changed::item-height', this.setCompactMode.bind(this)); const openLinkIcon = new St.Icon({ iconName: 'web-browser-symbolic', @@ -146,7 +145,7 @@ export class LinkPanoItem extends PanoItem { private setCompactMode() { if (this.settings.get_boolean('compact-mode')) { this.body.vertical = false; - this.imageContainer.width = this.settings.get_int('item-height') * 0.5; + this.imageContainer.width = this.settings.get_int('item-width') * 0.3; this.metaContainer.yAlign = Clutter.ActorAlign.CENTER; } else { this.body.vertical = true; diff --git a/src/components/panoItemOverlay.ts b/src/components/panoItemOverlay.ts index bfce8028..dbcc4a13 100644 --- a/src/components/panoItemOverlay.ts +++ b/src/components/panoItemOverlay.ts @@ -20,7 +20,10 @@ export class PanoItemOverlay extends St.BoxLayout { }, }; + private isVisible = false; + private isFavorite = false; private favoriteButton: St.Button; + private favoriteIcon: St.Icon; actionContainer: St.BoxLayout; constructor() { @@ -74,11 +77,22 @@ export class PanoItemOverlay extends St.BoxLayout { this.actionContainer.add_child(this.favoriteButton); this.actionContainer.add_child(removeButton); + this.favoriteIcon = new St.Icon({ + styleClass: 'pano-favorite-icon', + iconName: 'view-pin-symbolic', + xExpand: true, + yExpand: true, + xAlign: Clutter.ActorAlign.END, + yAlign: Clutter.ActorAlign.START, + }); + this.add_child(this.actionContainer); + this.add_child(this.favoriteIcon); } setControlsBackground(color: string): void { this.actionContainer.set_style(`background-color: ${color}`); + this.favoriteIcon.set_style(`background-color: ${color};`); const buttonColor = isDark(color) ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)'; for (const child of this.actionContainer.get_children()) { if (child instanceof St.Button) { @@ -88,10 +102,14 @@ export class PanoItemOverlay extends St.BoxLayout { } setVisibility(isVisible: boolean): void { + this.isVisible = isVisible; this.actionContainer.visible = isVisible; + this.favoriteIcon.visible = !isVisible && this.isFavorite; } setFavorite(isFavorite: boolean): void { + this.isFavorite = isFavorite; + this.favoriteIcon.visible = !this.isVisible && isFavorite; if (isFavorite) { this.favoriteButton.add_style_pseudo_class('active'); } else { diff --git a/src/styles/stylesheet.css b/src/styles/stylesheet.css index 24d0ba92..3aa393a0 100644 --- a/src/styles/stylesheet.css +++ b/src/styles/stylesheet.css @@ -49,7 +49,6 @@ border-radius: 16px; margin: 6px 0px 12px 6px; border: 4px solid transparent; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } .pano-window.vertical .pano-item { @@ -68,12 +67,9 @@ margin-bottom: 12px; } -.pano-item:hover { - box-shadow: none; -} - .pano-item-container { border-radius: 12px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } /* Overlay */ @@ -124,13 +120,21 @@ background-color: #c01c28; } +.pano-favorite-icon { + padding: 6px; + width: 12px; + height: 12px; + border-radius: 999px; + color: rgba(255, 255, 255, 0.75); +} + /* Header */ .pano-item-header { border-radius: 12px 12px 0px 0px; } .pano-item-title-icon { - padding: 4px; + padding: 8px; } .pano-item-title { @@ -148,10 +152,14 @@ /* Code Item */ .pano-item-code .pano-item-body-code-content { - margin: 12px; + margin: 12px 16px; tab-size: 2; } +.pano-item-code.compact .pano-item-body-code-content { + margin: 8px 12px 2px 12px; +} + /* Link Item */ .pano-item-link { padding: 0px; @@ -162,24 +170,21 @@ } .pano-item-link.compact .image-container { - border-radius: 0px 0px 0px 12px; + margin: 4px; + border-radius: 7px !important; } .pano-item-link .pano-item-body:first-child .image-container { border-radius: 12px 12px 0px 0px; } -.pano-item-link.compact .pano-item-body:first-child .image-container { - border-radius: 12px 0px 0px 12px; -} - .pano-item-link .meta-container { padding: 10px; border-radius: 0px 0px 12px 12px; } .pano-item-link.compact .meta-container { - padding: 0 10px; + padding: 0 8px 0 4px; border-radius: 0px 12px 12px 0px; } @@ -219,21 +224,34 @@ /* File Item */ .pano-item-file .title-container { - margin: 5px 10px 0 10px; + margin: 8px 12px 0 12px; height: 2.8em; } -.pano-item-file.no-preview .title-container, +.pano-item-file.no-preview .title-container { + height: auto; +} + .pano-item-file.compact .title-container { + margin-right: 8px; height: auto; } .pano-item-file .title-icon { - margin-top: 5px; - margin-bottom: 5px; - margin-right: 10px; - width: 2em; - height: 2em; + margin: 5px 10px 5px 0; + width: 1.75em; + height: 1.75em; +} + +.pano-item-file.no-preview .title-icon { + margin-bottom: 10px; +} + +.pano-item-file.compact .title-icon { + margin: 0 0 2px 5px; + padding: 0; + width: 1.125em; + height: 1.125em; } .pano-item-file .title-label { diff --git a/src/utils/color.ts b/src/utils/color.ts index 47601857..38b9a93f 100644 --- a/src/utils/color.ts +++ b/src/utils/color.ts @@ -31,11 +31,12 @@ export function getItemBackgroundColor(settings: Gio.Settings, headerColor: stri ? settings.get_string('incognito-window-background-color') : settings.get_string('window-background-color'); + // rgba(0, 0, 0, 0.1) is the box-shadow color if (isVisible(settings.get_uint('header-style'))) { - return mixColor(windowColor, headerColor); + return mixColor(mixColor(windowColor, 'rgba(0, 0, 0, 0.1)'), headerColor); } else if (bodyColor === null) { return windowColor; } else { - return mixColor(windowColor, bodyColor); + return mixColor(mixColor(windowColor, 'rgba(0, 0, 0, 0.1)'), bodyColor); } }