Upgrade to Agsv2 + Astal (#533)
* migrate to astal * Reorganize project structure. * progress * Migrate Dashboard and Window Title modules. * Migrate clock and notification bar modules. * Remove unused code * Media menu * Rework network and volume modules * Finish custom modules. * Migrate battery bar module. * Update battery module and organize helpers. * Migrate workspace module. * Wrap up bar modules. * Checkpoint before I inevitbly blow something up. * Updates * Fix event propagation logic. * Type fixes * More type fixes * Fix padding for event boxes. * Migrate volume menu and refactor scroll event handlers. * network module WIP * Migrate network service. * Migrate bluetooth menu * Updates * Migrate notifications * Update scrolling behavior for custom modules. * Improve popup notifications and add timer functionality. * Migration notifications menu header/controls. * Migrate notifications menu and consolidate notifications menu code. * Migrate power menu. * Dashboard progress * Migrate dashboard * Migrate media menu. * Reduce media menu nesting. * Finish updating media menu bindings to navigate active player. * Migrate battery menu * Consolidate code * Migrate calendar menu * Fix workspace logic to update on client add/change/remove and consolidate code. * Migrate osd * Consolidate hyprland service connections. * Implement startup dropdown menu position allocation. * Migrate settings menu (WIP) * Settings dialo menu fixes * Finish Dashboard menu * Type updates * update submoldule for types * update github ci * ci * Submodule update * Ci updates * Remove type checking for now. * ci fix * Fix a bunch of stuff, losing track... need rest. Brb coffee * Validate dropdown menu before render. * Consolidate code and add auto-hide functionality. * Improve auto-hide behavior. * Consolidate audio menu code * Organize bluetooth code * Improve active player logic * Properly dismiss a notification on action button resolution. * Implement CLI command engine and migrate CLI commands. * Handle variable disposal * Bar component fixes and add hyprland startup rules. * Handle potentially null bindings network and bluetooth bindings. * Handle potentially null wired adapter. * Fix GPU stats * Handle poller for GPU * Fix gpu bar logic. * Clean up logic for stat bars. * Handle wifi and wired bar icon bindings. * Fix battery percentages * Fix switch behavior * Wifi staging fixes * Reduce redundant hyprland service calls. * Code cleanup * Document the option code and reduce redundant calls to optimize performance. * Remove outdated comment. * Add JSDocs * Add meson to build hyprpanel * Consistency updates * Organize commands * Fix images not showing up on notifications. * Remove todo * Move hyprpanel configuration to the ~/.config/hyprpanel directory and add utility commands. * Handle SRC directory for the bundled/built hyprpanel. * Add namespaces to all windows * Migrate systray * systray updates * Update meson to include ts, tsx and scss files. * Remove log from meson * Fix file choose path and make it float. * Added a command to check the dependency status * Update dep names. * Get scale directly from env * Add todo
This commit is contained in:
Jas Singh
GitHub
592
src/scss/style/menus/dashboard.scss
Normal file
592
src/scss/style/menus/dashboard.scss
Normal file
@@ -0,0 +1,592 @@
|
||||
.dashboard-menu-content * {
|
||||
font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01;
|
||||
}
|
||||
|
||||
.dashboard-content-items {
|
||||
margin-left: 0.5em;
|
||||
min-width: 28.5em;
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
|
||||
border: $bar-menus-border-size solid
|
||||
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
|
||||
border-radius: $bar-menus-border-radius;
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
|
||||
button {
|
||||
border-radius: $bar-menus-buttons-radius;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
|
||||
margin: 0em 1.3em;
|
||||
border-radius: $bar-menus-card_radius;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.profile-picture-container {
|
||||
margin-right: 0.65em;
|
||||
|
||||
.profile-picture {
|
||||
min-width: $bar-menus-menu-dashboard-profile-size;
|
||||
min-height: $bar-menus-menu-dashboard-profile-size;
|
||||
border-radius: $bar-menus-menu-dashboard-profile-radius;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 1.5em;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.power-menu-container {
|
||||
margin-left: 0em;
|
||||
|
||||
.dashboard-button {
|
||||
min-width: 3em;
|
||||
min-height: 2.5em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
&.shutdown {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-shutdown
|
||||
);
|
||||
|
||||
label {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&.reboot {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-restart
|
||||
);
|
||||
|
||||
label {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&.logout {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-logout
|
||||
);
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-sleep
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.shutdown {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-shutdown
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.reboot {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-restart
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.logout {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-logout
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.sleep {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-powermenu-sleep
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcuts-container {
|
||||
font-size: 1em;
|
||||
|
||||
.dashboard-card {
|
||||
padding: 1.5em;
|
||||
|
||||
button {
|
||||
min-height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-button-section-container.visible {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.top-button.paired {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0em;
|
||||
|
||||
&.most-used {
|
||||
margin-right: 0.65em;
|
||||
}
|
||||
|
||||
&.utilities.paired {
|
||||
margin-left: 0em;
|
||||
}
|
||||
|
||||
button {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-shortcuts-background
|
||||
);
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
|
||||
min-height: 3em;
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.record.active {
|
||||
background: $red;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($red, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-shortcuts-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0em;
|
||||
min-height: 3em;
|
||||
min-width: 3.8em;
|
||||
|
||||
label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text);
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
&.wifi {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-wifi-background
|
||||
);
|
||||
}
|
||||
|
||||
&.bluetooth {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-bluetooth-background
|
||||
);
|
||||
}
|
||||
|
||||
&.notifications {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-notifications-background
|
||||
);
|
||||
}
|
||||
|
||||
&.playback {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-volume-background
|
||||
);
|
||||
}
|
||||
|
||||
&.input {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-input-background
|
||||
);
|
||||
}
|
||||
|
||||
&.wifi:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-wifi-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.bluetooth:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-bluetooth-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.notifications:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-notifications-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.playback:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-volume-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.input:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-input-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-disabled,
|
||||
$bar-menus-menu-dashboard-controls-disabled
|
||||
);
|
||||
|
||||
&.wifi:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-wifi-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.bluetooth:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-bluetooth-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.notifications:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-notifications-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.playback:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-volume-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
|
||||
&.input:hover {
|
||||
background: transparentize(
|
||||
if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-controls-input-background
|
||||
),
|
||||
0.5
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directories-container {
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 0em;
|
||||
}
|
||||
|
||||
.directory-link {
|
||||
padding: 0.5em 0em;
|
||||
min-width: 9em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&.right.top {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-right-top-color
|
||||
);
|
||||
}
|
||||
|
||||
&.right.middle {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-right-middle-color
|
||||
);
|
||||
}
|
||||
|
||||
&.right.bottom {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-right-bottom-color
|
||||
);
|
||||
}
|
||||
|
||||
&.left.top {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-left-top-color
|
||||
);
|
||||
}
|
||||
|
||||
&.left.middle {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-left-middle-color
|
||||
);
|
||||
}
|
||||
|
||||
&.left.bottom {
|
||||
color: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-buttons-default,
|
||||
$bar-menus-menu-dashboard-directories-left-bottom-color
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
margin-top: 0em;
|
||||
|
||||
.stat {
|
||||
label {
|
||||
margin-right: 0.75em;
|
||||
font-size: 1.3em;
|
||||
min-width: 1.65em;
|
||||
}
|
||||
|
||||
&.cpu label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
|
||||
}
|
||||
|
||||
&.ram label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
|
||||
}
|
||||
|
||||
&.gpu label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
|
||||
}
|
||||
|
||||
&.storage label {
|
||||
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
levelbar * {
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
trough {
|
||||
min-height: 1.05em;
|
||||
}
|
||||
|
||||
block {
|
||||
border-radius: $bar-menus-progressbar-radius;
|
||||
|
||||
&.empty {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-background,
|
||||
$bar-menus-menu-dashboard-monitors-bar_background
|
||||
);
|
||||
}
|
||||
|
||||
&.filled {
|
||||
padding-left: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cpu .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-cpu-bar
|
||||
);
|
||||
}
|
||||
|
||||
&.ram .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-ram-bar
|
||||
);
|
||||
}
|
||||
|
||||
&.gpu .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-gpu-bar
|
||||
);
|
||||
}
|
||||
|
||||
&.storage .stats-bar block.filled {
|
||||
background: if(
|
||||
$bar-menus-monochrome,
|
||||
$bar-menus-progressbar-foreground,
|
||||
$bar-menus-menu-dashboard-monitors-disk-bar
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 0.9em;
|
||||
|
||||
&.cpu {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
|
||||
}
|
||||
|
||||
&.ram {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
|
||||
}
|
||||
|
||||
&.gpu {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
|
||||
}
|
||||
|
||||
&.storage {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-content-items > :not(:first-child):not(:last-child) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
|
||||
.dashboard-content-items > :first-child {
|
||||
margin-top: 1.3em;
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
|
||||
.dashboard-content-items > :last-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
|
||||
.dashboard-content-items > :only-child {
|
||||
margin-top: 1.3em;
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
Reference in New Issue
Block a user