Fix margin between menu cards and added directory menu in dashboard.

This commit is contained in:
Jas Singh
2024-07-11 00:08:40 -07:00
parent cd149636bc
commit b974c1e755
13 changed files with 285 additions and 9 deletions

View File

@@ -0,0 +1,110 @@
const Directories = () => {
return Widget.Box({
class_name: "dashboard-card directories-container",
vpack: "fill",
hpack: "fill",
expand: true,
children: [
Widget.Box({
vertical: true,
expand: true,
class_name: "section left",
children: [
Widget.Button({
hpack: "start",
expand: true,
class_name: "directory-link documents",
on_primary_click: () => {
Utils.execAsync("dolphin Documents").catch(
(err) => `Failed to open Dolphin: ${err}`,
);
},
child: Widget.Label({
hpack: "start",
label: "󱧶 Documents",
}),
}),
Widget.Button({
hpack: "start",
expand: true,
class_name: "directory-link downloads",
on_primary_click: () => {
Utils.execAsync("dolphin Downloads").catch(
(err) => `Failed to open Dolphin: ${err}`,
);
},
child: Widget.Label({
hpack: "start",
label: "󰉍 Downloads",
}),
}),
Widget.Button({
expand: true,
hpack: "start",
class_name: "directory-link home",
on_primary_click: () => {
Utils.execAsync("dolphin ").catch(
(err) => `Failed to open Dolphin: ${err}`,
);
},
child: Widget.Label({
hpack: "start",
label: "󱂵 Home",
}),
}),
],
}),
Widget.Box({
vertical: true,
expand: true,
class_name: "section right",
children: [
Widget.Button({
expand: true,
hpack: "start",
class_name: "directory-link pictures",
on_primary_click: () => {
Utils.execAsync("dolphin Pictures").catch(
(err) => `Failed to open Dolphin: ${err}`,
);
},
child: Widget.Label({
hpack: "start",
label: "󰉏 Pictures",
}),
}),
Widget.Button({
expand: true,
hpack: "start",
class_name: "directory-link videos",
on_primary_click: () => {
Utils.execAsync("dolphin Videos").catch(
(err) => `Failed to open Dolphin: ${err}`,
);
},
child: Widget.Label({
hpack: "start",
label: "󰉏 Videos",
}),
}),
Widget.Button({
expand: true,
hpack: "start",
class_name: "directory-link projects",
on_primary_click: () => {
Utils.execAsync("dolphin Projects").catch(
(err) => `Failed to open Dolphin: ${err}`,
);
},
child: Widget.Label({
hpack: "start",
label: "󰚝 Projects",
}),
}),
],
}),
],
});
};
export { Directories };

View File

@@ -3,6 +3,7 @@ import { Profile } from "./profile/index.js";
import { Shortcuts } from "./shortcuts/index.js";
import { Controls } from "./controls/index.js";
import { Stats } from "./stats/index.js";
import { Directories } from "./directories/index.js";
export default () => {
return PopupWindow({
@@ -26,6 +27,7 @@ export default () => {
Profile(),
Shortcuts(),
Controls(),
Directories(),
Stats(),
],
}),

View File

@@ -3,7 +3,7 @@ import icons from "../../../icons/index.js";
const EnergyProfiles = () => {
return Widget.Box({
class_name: "menu-section-container",
class_name: "menu-section-container energy",
vertical: true,
children: [
Widget.Box({

View File

@@ -214,7 +214,7 @@ export default () => {
Widget.Label({
vpack: "center",
class_name: "placeholder-label dim bell",
label: "󰂚",
label: notifs.bind("dnd").as(dnd => dnd ? "󰂛" : "󰂚"),
}),
Widget.Label({
vpack: "start",

View File

@@ -10,3 +10,10 @@
}
}
}
.menu-section-container.brightness {
margin-bottom: 0em;
}
.menu-section-container.energy {
margin-top: 0.5em;
}

View File

@@ -27,3 +27,13 @@
}
}
.menu-section-container.volume {
margin-bottom: 0.65em;
}
.menu-section-container.playback {
margin-top: 0em;
margin-bottom: 0.65em;
}
.menu-section-container.input {
margin-top: 0em;
}

View File

@@ -80,6 +80,12 @@
}
}
.calendar-menu-item-container.clock {
margin-bottom: 0.65em;
}
.calendar-menu-item-container.calendar {
margin-bottom: 0.65em;
}
.calendar-menu-item-container.weather {
margin-bottom: 0em;
}

View File

@@ -18,6 +18,8 @@
}
.profile-picture-container {
margin-right: 0.65em;
margin-bottom: 0.65em;
.profile-picture {
font-size: 7.5em;
}
@@ -30,6 +32,7 @@
.power-menu-container {
margin-left: 0em;
margin-bottom: 0.65em;
.dashboard-button {
min-width: 3em;
@@ -83,10 +86,14 @@
.container {
margin-top: 0em;
margin-bottom: 0.65em;
&.most-used {
margin-right: 0em;
}
&.utilities {
margin-left: 0.65em;
}
button {
background: $lavender;
@@ -114,6 +121,7 @@
}
.controls-container {
margin-bottom: 0.65em;
&.dashboard-card {
margin-top: 0em;
}
@@ -186,6 +194,51 @@
}
}
.directories-container {
&.dashboard-card {
margin-top: 0em;
margin-bottom: 0.65em;
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;
}
&.documents {
color: $teal;
}
&.downloads {
color: $pink;
}
&.home {
color: $lavender;
}
&.pictures {
color: $mauve;
}
&.videos {
color: $yellow;
}
&.projects {
color: $maroon;
}
&:hover {
color: $green;
}
}
}
.stats-container {
margin-top: 0em;

View File

@@ -96,7 +96,7 @@
progress {
border-radius: 0.2em;
min-height: .85em;
background: $lavender;
background: $pink;
}
}

View File

@@ -36,6 +36,7 @@
font-size: 0.9em;
}
.menu-section-container.wifi {
margin-top: 0.65em;
.menu-items-section {
min-height: 12em;
}

View File

@@ -3,7 +3,7 @@
.notification-card-container.menu {
margin: 0em;
min-width: 28.6em;
min-height: 49.5em;
min-height: 48em;
background: $crust;
border: 0.13em solid $surface0;
border-radius: 0.7em;
@@ -38,7 +38,10 @@
}
.notification-card-content-container {
margin-bottom: 1em;
margin-bottom: 0.65em;
&:last-child {
margin-bottom: 1.3em;
}
}
.notification-card-content {
margin-bottom: 0.25em;

View File

@@ -434,6 +434,14 @@ spinner:checked {
color: #f9e2af;
}
.menu-section-container.brightness {
margin-bottom: 0em;
}
.menu-section-container.energy {
margin-top: 0.5em;
}
.menu-slider trough {
border-radius: 0.3rem;
background: #313244;
@@ -864,6 +872,19 @@ window#powermenu .powermenu.box {
color: #eba0ac;
}
.menu-section-container.volume {
margin-bottom: 0.65em;
}
.menu-section-container.playback {
margin-top: 0em;
margin-bottom: 0.65em;
}
.menu-section-container.input {
margin-top: 0em;
}
.menu-items-container.network {
font-size: 1.3em;
}
@@ -894,6 +915,9 @@ window#powermenu .powermenu.box {
.menu-items-container.network .connection-status {
font-size: 0.9em;
}
.menu-items-container.network .menu-section-container.wifi {
margin-top: 0.65em;
}
.menu-items-container.network .menu-section-container.wifi .menu-items-section {
min-height: 12em;
}
@@ -1073,7 +1097,7 @@ window#powermenu .powermenu.box {
.menu-items-container.media .menu-slider.media.progress trough progress {
border-radius: 0.2em;
min-height: 0.85em;
background: #b4befe;
background: #f5c2e7;
}
.menu-items-container.media .menu-slider.media.progress:hover trough {
background: #45475a;
@@ -1082,7 +1106,7 @@ window#powermenu .powermenu.box {
.notification-card-container.menu {
margin: 0em;
min-width: 28.6em;
min-height: 49.5em;
min-height: 48em;
background: #11111b;
border: 0.13em solid #313244;
border-radius: 0.7em;
@@ -1113,7 +1137,10 @@ window#powermenu .powermenu.box {
margin: 0em;
}
.notification-card-container.menu .notification-card-content-container {
margin-bottom: 1em;
margin-bottom: 0.65em;
}
.notification-card-container.menu .notification-card-content-container:last-child {
margin-bottom: 1.3em;
}
.notification-card-container.menu .notification-card-content {
margin-bottom: 0.25em;
@@ -1228,6 +1255,14 @@ window#powermenu .powermenu.box {
color: #94e2d5;
}
.calendar-menu-item-container.clock {
margin-bottom: 0.65em;
}
.calendar-menu-item-container.calendar {
margin-bottom: 0.65em;
}
.calendar-menu-item-container.weather {
margin-bottom: 0em;
}
@@ -1353,6 +1388,10 @@ window#powermenu .powermenu.box {
border-radius: 0.4em;
padding: 1.5em;
}
.dashboard-content-items .profile-picture-container {
margin-right: 0.65em;
margin-bottom: 0.65em;
}
.dashboard-content-items .profile-picture-container .profile-picture {
font-size: 7.5em;
}
@@ -1363,6 +1402,7 @@ window#powermenu .powermenu.box {
}
.dashboard-content-items .power-menu-container {
margin-left: 0em;
margin-bottom: 0.65em;
}
.dashboard-content-items .power-menu-container .dashboard-button {
min-width: 3em;
@@ -1405,10 +1445,14 @@ window#powermenu .powermenu.box {
}
.dashboard-content-items .shortcuts-container .container {
margin-top: 0em;
margin-bottom: 0.65em;
}
.dashboard-content-items .shortcuts-container .container.most-used {
margin-right: 0em;
}
.dashboard-content-items .shortcuts-container .container.utilities {
margin-left: 0.65em;
}
.dashboard-content-items .shortcuts-container .container button {
background: #b4befe;
color: #1e1e2e;
@@ -1426,6 +1470,9 @@ window#powermenu .powermenu.box {
.dashboard-content-items .shortcuts-container .container button:hover {
background: #f5c2e7;
}
.dashboard-content-items .controls-container {
margin-bottom: 0.65em;
}
.dashboard-content-items .controls-container.dashboard-card {
margin-top: 0em;
}
@@ -1492,6 +1539,43 @@ window#powermenu .powermenu.box {
.dashboard-content-items .controls-container button.disabled.input:hover {
background: rgba(245, 194, 231, 0.3);
}
.dashboard-content-items .directories-container.dashboard-card {
margin-top: 0em;
margin-bottom: 0.65em;
padding-left: 1.5em;
padding-right: 0em;
}
.dashboard-content-items .directories-container .directory-link {
padding: 0.5em 0em;
min-width: 9em;
}
.dashboard-content-items .directories-container .directory-link:last-child {
margin-bottom: 0em;
}
.dashboard-content-items .directories-container .directory-link label {
font-size: 1.3em;
}
.dashboard-content-items .directories-container .directory-link.documents {
color: #94e2d5;
}
.dashboard-content-items .directories-container .directory-link.downloads {
color: #f5c2e7;
}
.dashboard-content-items .directories-container .directory-link.home {
color: #b4befe;
}
.dashboard-content-items .directories-container .directory-link.pictures {
color: #cba6f7;
}
.dashboard-content-items .directories-container .directory-link.videos {
color: #f9e2af;
}
.dashboard-content-items .directories-container .directory-link.projects {
color: #eba0ac;
}
.dashboard-content-items .directories-container .directory-link:hover {
color: #a6e3a1;
}
.dashboard-content-items .stats-container {
margin-top: 0em;
}

File diff suppressed because one or more lines are too long