Implement framework for custom modules and out of the box custom modules as well. (#213)
* Create declarative module scaffolding * Added ram module (WIP) * Updates to options, styling and more. * Added function for styling custom modules. * Added utility functions and cleaned up code * Type and fn name updates. * Update module utils to handle absent values. * Added icon color in style2 that was missing. * Linted utils.ts * Add CPU module and update RAM module to use /proc/meminfo. * Added disk storage module. * Consolidate code * Added netstat module and removed elements from systray default ignore list. * Added keyboard layout module. * Fix hook types and move module to customModules directory * Added updates modules. * Spacing updates * Added weather module. * Added power menu and power module in bar. Increased update default interval to 6 ours. * Updated styling of bar buttons, made power menu label toggleable, etc. * Consolidate code and add dynamic tooltips based on data being used. * Make default custom mogules matugen compatible * Update base theme * Fix custom module background coloring * Remove testing opacity. * Update themes to account for new modules * Update nix stuff for libgtop (Need someone to test this) * Update nix * Update fractions to multiplications * Move styling in style directory * Implement a polling framework for variables that can dynamically adjust polling intervals. * Netstat module updates when interface name is changed. * Readme update
This commit is contained in:
Jas Singh
GitHub
255
scss/style/customModules/style.scss
Normal file
255
scss/style/customModules/style.scss
Normal file
@@ -0,0 +1,255 @@
|
||||
/*
|
||||
* #################################
|
||||
* # Default Styling #
|
||||
* #################################
|
||||
*/
|
||||
.bar-button-label {
|
||||
margin-left: 0.5em;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.module-icon {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.bar-button-icon {
|
||||
border-top-left-radius: $bar-buttons-radius;
|
||||
border-bottom-left-radius: $bar-buttons-radius;
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-left: $bar-buttons-padding_x;
|
||||
padding-right: 0.5em;
|
||||
background: $text;
|
||||
color: $bar-background;
|
||||
}
|
||||
|
||||
.bar-button-label {
|
||||
padding: $bar-buttons-padding_y 0em;
|
||||
padding-right: $bar-buttons-padding_x;
|
||||
padding-left: 0.5em;
|
||||
margin-left: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Styling Function #
|
||||
* #################################
|
||||
*/
|
||||
@mixin styleModule($class, $textColor, $iconColor, $iconBackground, $labelBackground, $spacing, $fontSize: 1em) {
|
||||
.bar_item_box_visible {
|
||||
&.#{$class} {
|
||||
background: $labelBackground;
|
||||
|
||||
&.style2 {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.module-label.#{$class} {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
|
||||
margin-left: $spacing;
|
||||
border-radius: $bar-buttons-radius;
|
||||
}
|
||||
|
||||
.module-icon.#{$class} {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
|
||||
font-size: if($fontSize, $fontSize, 1em);
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.module-icon.#{$class} {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
|
||||
padding-right: $spacing;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
|
||||
}
|
||||
|
||||
.module-label.#{$class} {
|
||||
background: $labelBackground;
|
||||
padding-left: $spacing * 1.5;
|
||||
margin-left: 0em;
|
||||
border-top-left-radius: 0em;
|
||||
border-bottom-left-radius: 0em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Ram Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'ram',
|
||||
// label color
|
||||
$bar-buttons-modules-ram-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-ram-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-ram-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-ram-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-ram-spacing //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Cpu Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'cpu',
|
||||
// label color
|
||||
$bar-buttons-modules-cpu-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-cpu-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-cpu-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-cpu-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-cpu-spacing,
|
||||
// custom font size
|
||||
1.05em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Storage Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'storage',
|
||||
// label color
|
||||
$bar-buttons-modules-storage-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-storage-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-storage-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-storage-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-storage-spacing,
|
||||
// custom font size
|
||||
1.3em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Netstat Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'netstat',
|
||||
// label color
|
||||
$bar-buttons-modules-netstat-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-netstat-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-netstat-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-netstat-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-netstat-spacing,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # KB Layout Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'kblayout',
|
||||
// label color
|
||||
$bar-buttons-modules-kbLayout-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-kbLayout-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-kbLayout-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-kbLayout-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-kbLayout-spacing,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Updates Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'updates',
|
||||
// label color
|
||||
$bar-buttons-modules-updates-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-updates-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-updates-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-updates-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-updates-spacing,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Weather Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'weather-custom',
|
||||
// label color
|
||||
$bar-buttons-modules-weather-text,
|
||||
// icon color
|
||||
$bar-buttons-modules-weather-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-weather-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-weather-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-weather-spacing,
|
||||
// custom font size
|
||||
1.2em //
|
||||
);
|
||||
|
||||
/*
|
||||
* #################################
|
||||
* # Power Module Styling #
|
||||
* #################################
|
||||
*/
|
||||
@include styleModule( //
|
||||
// class name
|
||||
'powermodule',
|
||||
// label color
|
||||
$red,
|
||||
// icon color
|
||||
$bar-buttons-modules-power-icon,
|
||||
// icon background if split style is used
|
||||
$bar-buttons-modules-power-icon_background,
|
||||
// label background
|
||||
$bar-buttons-modules-power-background,
|
||||
// inner spacing
|
||||
$bar-buttons-modules-power-spacing,
|
||||
// custom font size
|
||||
1.3em //
|
||||
);
|
||||
Reference in New Issue
Block a user