feat(widget): update menu and group label settings for improved funct…

…ionality - Added 'show_label_name' option to group_label for displaying label names. - Consolidated menu settings into a single dictionary for better organization and clarity.
amnweb · Jan 15, 2025 · db39043 · db39043
1 parent e1945b5
commit db39043
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 12 deletions.
diff --git a/docs/assets/576054922-dc651bd1-dedc-5786-c62a7ebdca70.png b/docs/assets/576054922-dc651bd1-dedc-5786-c62a7ebdca70.png
diff --git a/docs/widgets/(Widget)-Disk.md b/docs/widgets/(Widget)-Disk.md
@@ -6,7 +6,7 @@
 | `volume_label`       | string  | `'C'`        | Partition which you want to show in the bar |
 | `decimal_display` | integer | `1`                                                                  | The number of decimal to show, defaul 1 (min 0 max 3) |
 | `update_interval` | integer | `60`                                                                  | The interval in seconds to update the disk widget. Must be between 0 and 3600. |
-| `group_label` | dict | `{'enabled': False, 'volume_labels': ["C"], 'blur': True, 'round_corners': True, 'round_corners_type': 'normal','border_color': 'System', 'alignment': 'right', 'direction': 'down', 'distance': 6}` | Group labels for multiple disks. This will show the labels of multiple disks in a popup window. |
+| `group_label` | dict | `{'enabled': False, 'volume_labels': ["C"], 'show_label_name': True, 'blur': True, 'round_corners': True, 'round_corners_type': 'normal','border_color': 'System', 'alignment': 'right', 'direction': 'down', 'distance': 6}` | Group labels for multiple disks. This will show the labels of multiple disks in a popup window. |
 | `callbacks`       | dict    | `{'on_left': 'do_nothing', 'on_middle': 'do_nothing', 'on_right': "exec explorer C:\\"}` | Callbacks for mouse events. |
 | `container_padding`  | dict | `{'top': 0, 'left': 0, 'bottom': 0, 'right': 0}`      | Explicitly set padding inside widget container. |
 | `animation`         | dict    | `{'enabled': True, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
@@ -31,6 +31,7 @@ disk:
       group_label:
         enabled: true
         volume_labels: ["C", "D", "E", "F"]
+        show_label_name: true
         blur: True
         round_corners: True
         round_corners_type: "small"
@@ -54,6 +55,7 @@ disk:
 - **group_label:** Group labels for multiple disks. This will show the labels of multiple disks in a popup window.
   - **enabled:** Enable group labels.
   - **volume_labels:** List of volume labels to show in the group label.
+  - **show_label_name:** Show the label name in the group label.
   - **blur:** Enable blur effect for the group label.
   - **round_corners:** Enable round corners for group label.
   - **round_corners_type:** Border type for group label can be `normal` and `small`. Default is `normal`.

diff --git a/docs/widgets/(Widget)-Github.md b/docs/widgets/(Widget)-Github.md
@@ -10,9 +10,7 @@
 | `max_notification`| integer | `20`                           | The maximum number of notifications to display in the menu. |
 | `only_unread`    | boolean  | `False`                        | Whether to show only unread notifications. |
 | `max_field_size` | integer  | `100`                          | The maximum number of characters in the title before truncation. |
-| `menu_width`     | integer  | `400`                          | The width of the menu in pixels. |
-| `menu_height`    | integer  | `400`                          | The height of the menu in pixels. |
-| `menu_offset`    | integer  | `240`                          | The offset of the menu in pixels. |
+| `menu` | dict | `{'blur': True, 'round_corners': True, 'round_corners_type': 'normal', 'border_color': 'System', 'alignment': 'right', 'direction': 'down', 'distance': 6}` | Menu settings for the widget. |
 | `animation`         | dict    | `{'enabled': True, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_padding`  | dict | `{'top': 0, 'left': 0, 'bottom': 0, 'right': 0}`      | Explicitly set padding inside widget container. |
 
@@ -28,10 +26,15 @@ github:
     max_notification: 20 # Max number of notification displaying in menu max: 50
     only_unread: false # Show only unread or all notifications; 
     max_field_size: 54 # Max characters in title before truncation.
-    menu_width: 400 
-    menu_height: 400 
-    menu_offset: 240 
     update_interval: 300 # Check for new notification in seconds
+    menu:
+      blur: True # Enable blur effect for the menu
+      round_corners: True # Enable round corners for the menu (this option is not supported on Windows 10)
+      round_corners_type: "normal" # Set the type of round corners for the menu (normal, small) (this option is not supported on Windows 10)
+      border_color: "System" # Set the border color for the menu (this option is not supported on Windows 10)
+      alignment: "right"
+      direction: "down"
+      distance: 6
 ```
 ## Description of Options
 
@@ -43,15 +46,99 @@ github:
 - **max_notification:** The maximum number of notifications to display in the menu, max 50.
 - **only_unread:** Whether to show only unread notifications.
 - **max_field_size:** The maximum number of characters in the title before truncation.
-- **menu_width:** The width of the menu in pixels.
-- **menu_height:** The height of the menu in pixels.
-- **menu_offset:** The offset of the menu in pixels.
+- **menu:** A dictionary specifying the menu settings for the widget. It contains the following keys:
+  - **blur:** Enable blur effect for the menu.
+  - **round_corners:** Enable round corners for the menu (this option is not supported on Windows 10).
+  - **round_corners_type:** Set the type of round corners for the menu (normal, small) (this option is not supported on Windows 10).
+  - **border_color:** Set the border color for the menu (this option is not supported on Windows 10).
+  - **alignment:** Set the alignment of the menu (left, right).
+  - **direction:** Set the direction of the menu (up, down).
+  - **distance:** Set the distance of the menu from the widget.
 - **animation:** A dictionary specifying the animation settings for the widget. It contains three keys: `enabled`, `type`, and `duration`. The `type` can be `fadeInOut` and the `duration` is the animation duration in milliseconds.
 - **container_padding**: Explicitly set padding inside widget container. Use this option to set padding inside the widget container. You can set padding for top, left, bottom and right sides of the widget container.
 
-## Example Style
+## Widget Style
 ```css
 .github-widget {}
 .github-widget .widget-container {}
 .github-widget .widget-container .label {}
-```
+ /* Popup menu*/
+.github-menu {}
+.github-menu .header {}
+.github-menu .footer {}
+.github-menu .contents {}
+.github-menu .contents .item {}
+.github-menu .contents .item.new {} /* New notification */
+.github-menu .contents .item .title {}
+.github-menu .contents .item .description {}
+.github-menu .contents .item .icon {}
+```
+
+## Example Style for the Widget and Menu
+```css
+.github-menu    {
+    background-color:  rgba(17, 17, 27, 0.2);
+    max-height: 500px;
+    min-height: 500px;
+    min-width: 420px;
+}
+.github-menu .header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 15px;
+    font-weight: 400;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 8px;
+    color: white;
+    background-color: rgba(17, 17, 27, 0.75);
+}
+.github-menu .footer {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 12px;
+    padding: 4px 8px 6px 8px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #9399b2;
+    background-color: rgba(17, 17, 27, 0.75);
+}
+.github-menu .contents {
+    background-color:  rgba(17, 17, 27, 0.2);
+}
+.github-menu .contents .item {
+    min-height: 40px;
+    padding: 6px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
+}
+.github-menu .contents .item:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0);
+}
+.github-menu .contents .item .title,
+.github-menu .contents .item .description {
+    color: #9399b2;
+    font-family: Segoe UI;
+}
+.github-menu .contents .item .title {
+    font-size: 14px;
+    font-weight: 600; 
+}
+.github-menu .contents .item .description {
+    font-size: 12px;
+    font-weight: 500
+}
+.github-menu .contents .item.new .title,
+.github-menu .contents .item.new .description {
+    color: #ffffff
+}
+.github-menu .contents .item .icon {
+    font-size: 16px;
+    padding-right: 0;
+    padding-left: 8px;
+    padding-right: 4px;
+    color: #9399b2;
+}
+.github-menu .contents .item.new .icon {
+    color: #3fb950;
+}
+```
+
+## Preview of the Widget
+![GitHub YASB Widget](assets/576054922-dc651bd1-dedc-5786-c62a7ebdca70.png)