Add favorite indicator + modify file icon placement and link preview …

…style in compact mode

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) {

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;

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 {

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 {

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);
   }
 }