feat(widget/windows_desktops): add animation option for workspace but…

…tons Added a new configuration option for button animations in the Windows Desktops widget. This allows users to enable or disable animations for workspace buttons, enhancing the visual experience.
amnweb · Jan 26, 2025 · 4ef4707 · 4ef4707
1 parent f18df35
commit 4ef4707
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/docs/widgets/(Widget)-Windows-Desktops.md b/docs/widgets/(Widget)-Windows-Desktops.md
@@ -4,6 +4,7 @@
 | `label_workspace_btn`    | string  | `'{index}'`              | The format string for workspace buttons.                                    |
 | `label_workspace_active_btn` | string | `'{index}'`              | The format string for the active workspace button.                          |
 | `switch_workspace_animation` | string | `'true'`                 | The OS animation to use when switching workspaces.                             |
+| `animation`                | bool   | `false`                   | Buttons animation.   |
 | `container_padding`  | dict | `{'top': 0, 'left': 0, 'bottom': 0, 'right': 0}`      | Explicitly set padding inside widget container.
 
 ## Example Configuration
@@ -25,6 +26,7 @@ windows_workspaces:
 - **label_workspace_btn:** The format string for workspace buttons, can be icon or {index}.
 - **label_workspace_active_btn:** The format string for the active workspace button, can be icon or {index}.
 - **switch_workspace_animation:** The OS animation to use when switching workspaces.
+- **animation:** Buttons animation.
 - **container_padding:** Explicitly set padding inside widget container.
 
 
@@ -34,30 +36,33 @@ windows_workspaces:
 .windows-desktops .widget-container {} /*Style for widget container.*/
 .windows-desktops .ws-btn {} /*Style for buttons.*/
 .windows-desktops .ws-btn.active {} /*Style for the active workspace button.*/
+.windows-workspaces .ws-btn.button-1 {} /*Style for first button.*/
+.windows-workspaces .ws-btn.button-2 {} /*Style for second  button.*/
+.windows-workspaces .ws-btn.active.button-1 {} /*Style for the active first workspace button.*/
+.windows-workspaces .ws-btn.active.button-2 {} /*Style for the active second workspace button.*/
 ```
 
 ### Example
 ```css
 .windows-desktops {
     padding: 0 4px 0 14px;
 }
-.windows-desktops {
-    padding: 0 0px 0 10px;
-}
 .windows-desktops .widget-container {
     background-color: #11111b;
     margin: 4px 0 4px 0;
     border-radius: 12px;
 }
-.windows-desktops .ws-btn,
-.windows-desktops .ws-btn-active {
+.windows-desktops .ws-btn {
     color: #7f849c;
     border: none;
     font-size: 14px;
     margin: 0 3px;
     padding: 0 
 }
-.windows-desktops .ws-btn-active {
+.windows-desktops .ws-btn.active {
     color: #89b4fa;
 } 
-```
+```
+
+> [!NOTE]  
+> You can use `button-x` to style each button separately. Where x is the index of the button. Index starts from 1.