Fix margin between menu cards and added directory menu in dashboard.
This commit is contained in:
110
modules/menus/dashboard/directories/index.js
Normal file
110
modules/menus/dashboard/directories/index.js
Normal 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 };
|
||||
@@ -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(),
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -10,3 +10,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section-container.brightness {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
.menu-section-container.energy {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
progress {
|
||||
border-radius: 0.2em;
|
||||
min-height: .85em;
|
||||
background: $lavender;
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.menu-section-container.wifi {
|
||||
margin-top: 0.65em;
|
||||
.menu-items-section {
|
||||
min-height: 12em;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
90
style.css
90
style.css
@@ -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
Reference in New Issue
Block a user