Datemenu spacing improvements, modal/script/notif buttons fixes

- Now "spacing" property is responsible for spacings in datemenu, not components with margins. Looks the same on 47 and 43;
- Fixed styles mismatch on older GNOME versions;
- Fixed notification buttons on older GNOME versions;
- Fixed some buttons in login/unlock dialogs on older GNOME versions;
- Fixed an issue where generate_file moved specific GNOME version assets to marble folder instead of copying them to temp folder;
This commit is contained in:
Vladyslav Hroshev
2025-03-17 14:23:57 +02:00
parent 1bc6a89d77
commit cf007eab54
8 changed files with 64 additions and 43 deletions

View File

@@ -33,7 +33,7 @@ class Theme:
# move files to temp folder # move files to temp folder
copy_files(self.theme_folder, self.temp_folder) copy_files(self.theme_folder, self.temp_folder)
generate_file(f"{self.theme_folder}", self.main_styles) generate_file(f"{self.theme_folder}", self.temp_folder, self.main_styles)
# after generating main styles, remove .css and .versions folders # after generating main styles, remove .css and .versions folders
shutil.rmtree(f"{self.temp_folder}/.css/", ignore_errors=True) shutil.rmtree(f"{self.temp_folder}/.css/", ignore_errors=True)
shutil.rmtree(f"{self.temp_folder}/.versions/", ignore_errors=True) shutil.rmtree(f"{self.temp_folder}/.versions/", ignore_errors=True)

View File

@@ -3,10 +3,11 @@ import shutil
from .gnome import gnome_version from .gnome import gnome_version
from .get_version_folder import get_version_folders from .get_version_folder import get_version_folders
def generate_file(folder, final_file): def generate_file(folder, temp_folder, final_file):
""" """
Combines all files in a folder into a single file Combines all files in a folder into a single file
:param folder: source folder :param folder: source folder
:param temp_folder: temporary folder
:param final_file: location where file will be created :param final_file: location where file will be created
""" """
opened_file = open(final_file, "w") opened_file = open(final_file, "w")
@@ -32,6 +33,6 @@ def generate_file(folder, final_file):
for file in os.listdir(version_path): for file in os.listdir(version_path):
if file.endswith('.svg'): if file.endswith('.svg'):
shutil.move(os.path.join(version_path, file), folder) shutil.copy(os.path.join(version_path, file), temp_folder)
opened_file.close() opened_file.close()

View File

@@ -7,7 +7,6 @@ def gnome_version() -> str | None:
try: try:
output = subprocess.check_output(['gnome-shell', '--version'], text=True).strip() output = subprocess.check_output(['gnome-shell', '--version'], text=True).strip()
print(output)
return output.split(' ')[2] return output.split(' ')[2]
except subprocess.CalledProcessError: except subprocess.CalledProcessError:
return None return None

View File

@@ -3,16 +3,20 @@
/* overall menu */ /* overall menu */
#calendarArea { #calendarArea {
padding: 0; padding: 0;
spacing: 9px;
} }
/* Calendar menu side column */ /* set padding here instead of #calendarArea for GNOME older than 46 */
.datemenu-calendar-column { spacing: 0px; } .datemenu-popover { padding: 9px; }
/* let's bring back issue #1 */ /* padding property for older gnome versions */
.datemenu-calendar-column:ltr { margin-left: 0; } .datemenu-calendar-column:ltr { margin-left: 0; padding-left: 0; }
.datemenu-calendar-column:rtl { margin-right: 0; } .datemenu-calendar-column:rtl { margin-right: 0; padding-right: 0; }
.datemenu-calendar-column .datemenu-displays-box { spacing: 0px; } .datemenu-calendar-column, /* Calendar menu side column */
.datemenu-calendar-column .datemenu-displays-box { /* widgets below calendar */
spacing: 9px;
}
/* today header button */ /* today header button */
@@ -20,6 +24,7 @@
color: TEXT-SECONDARY-COLOR; color: TEXT-SECONDARY-COLOR;
background-color: none; background-color: none;
border-radius: 12px; border-radius: 12px;
margin: 0;
} }
.datemenu-today-button:hover { .datemenu-today-button:hover {
@@ -51,7 +56,9 @@
border-radius: 14px; border-radius: 14px;
background-color: SECTION-COLOR; background-color: SECTION-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
border: 0;
padding: 5px; padding: 5px;
margin: 0;
} }
/* month header */ /* month header */
@@ -168,6 +175,8 @@
background-color: SECTION-COLOR; background-color: SECTION-COLOR;
color: TEXT-SECONDARY-COLOR; color: TEXT-SECONDARY-COLOR;
border-radius: 14px; border-radius: 14px;
margin: 0;
border: 0;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
transition-duration: 125ms; transition-duration: 125ms;
} }

View File

@@ -65,42 +65,44 @@
/* login buttons */ /* login buttons */
.login-dialog-button.cancel-button, .cancel-button,
.login-dialog-button.switch-user-button, .switch-user-button,
.login-dialog-button.login-dialog-session-list-button { .login-dialog-session-list-button {
background-color: ACCENT-DISABLED-COLOR; background-color: ACCENT-DISABLED-COLOR;
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
padding: 12px;
min-height: 16px;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
border-radius: 99px; border-radius: 99px;
transition-duration: 100ms; transition-duration: 100ms;
} }
.login-dialog-button.cancel-button:hover, .cancel-button:hover,
.login-dialog-button.switch-user-button:hover, .switch-user-button:hover,
.login-dialog-button.login-dialog-session-list-button:hover { .login-dialog-session-list-button:hover {
background-color: ACCENT-DISABLED_HOVER; background-color: ACCENT-DISABLED_HOVER;
} }
.login-dialog-button.cancel-button:focus, .cancel-button:focus,
.login-dialog-button.switch-user-button:focus, .switch-user-button:focus,
.login-dialog-button.login-dialog-session-list-button:focus { .login-dialog-session-list-button:focus {
background-color: ACCENT-DISABLED_HOVER; background-color: ACCENT-DISABLED_HOVER;
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
} }
.login-dialog-button.cancel-button:focus:active, .cancel-button:focus:active,
.login-dialog-button.switch-user-button:focus:active, .switch-user-button:focus:active,
.login-dialog-button.login-dialog-session-list-button:focus:active, .login-dialog-session-list-button:focus:active,
.login-dialog-button.cancel-button:focus:hover, .cancel-button:focus:hover,
.login-dialog-button.switch-user-button:focus:hover, .switch-user-button:focus:hover,
.login-dialog-button.login-dialog-session-list-button:focus:hover { .login-dialog-session-list-button:focus:hover {
background-color: ACCENT-DISABLED_HOVER; background-color: ACCENT-DISABLED_HOVER;
box-shadow: inset 0 0 0 1px ACCENT-SECONDARY-COLOR !important; box-shadow: inset 0 0 0 1px ACCENT-SECONDARY-COLOR !important;
} }
.login-dialog-button.cancel-button:active, .cancel-button:active,
.login-dialog-button.switch-user-button:active, .switch-user-button:active,
.login-dialog-button.login-dialog-session-list-button:active { .login-dialog-session-list-button:active {
background-color: ACCENT-DISABLED_HOVER; background-color: ACCENT-DISABLED_HOVER;
} }

View File

@@ -7,8 +7,8 @@
} }
/* dnd and clear button */ /* dnd and clear button */
.message-list-controls:ltr { padding: auto 0 auto auto; } .message-list-controls:ltr { padding: auto 0 0 6px; }
.message-list-controls:rtl { padding: auto auto auto 0; } .message-list-controls:rtl { padding: auto 6px 0 0; }
/* "No Notifications" text */ /* "No Notifications" text */
.message-list-placeholder { .message-list-placeholder {
@@ -16,9 +16,9 @@
font-weight: 700; font-weight: 700;
} }
/* remove right margin in message list section (datemenu) */ /* remove right margin in message list section (datemenu) (a.k.a scrollbar) */
.message-list-sections:ltr { margin-right: 0; } .message-list:ltr, .message-list-sections:ltr { margin-right: 0; }
.message-list-sections:rtl { margin-left: 0; } .message-list:rtl, .message-list-sections:rtl { margin-left: 0; }
/* popup messages */ /* popup messages */
@@ -36,13 +36,17 @@
} }
/* Box layout for messages. I know looks weird but i can't find a better way to do it */ /* Box layout for messages. I know looks weird but i can't find a better way to do it */
.message-list > StBoxLayout > StScrollView > StViewport { spacing: 8px; } /* gap between player and messages box */ .message-list > StBoxLayout > StScrollView > StViewport, /* gap between player and messages box */
.message-list > StBoxLayout > StScrollView > StViewport > StBoxLayout > StBoxLayout { spacing: 8px; } /* gap between messages */ .message-list > StBoxLayout > StScrollView > StViewport > StBoxLayout > StBoxLayout { /* gap between messages */
spacing: 9px;
}
/* messages in menus */ /* messages in menus */
.message-list .message, .popup-menu-content .message { .message-list .message, .popup-menu-content .message {
background-color: SECTION-COLOR; background-color: SECTION-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
border: 0;
margin: 0; /* fix margins for GNOME older than 46 */
border-radius: 13px; border-radius: 13px;
transition-duration: 100ms; transition-duration: 100ms;
} }
@@ -70,8 +74,13 @@
.message .message-header .message-header-content .message-source-title, .message .message-header .message-header-content .message-source-title,
.message .message-header .message-header-content .event-time { .message .message-header .message-header-content .event-time {
color: TEXT-SECONDARY-COLOR; color: TEXT-SECONDARY-COLOR;
padding-bottom: 0;
} }
/* that's much better than adding "margin: $base_padding * 0.5;" to .message-close-button */
.message-close-button { margin: 0; }
.message-header:ltr > :last-child { margin-right: 2px; }
.messahe-header:rtl > :first-child { margin-left: 2px; }
/* close button, expand button (46+) */ /* close button, expand button (46+) */
.message-close-button, .message-close-button,

View File

@@ -28,6 +28,7 @@
/* password entry */ /* password entry */
.prompt-dialog-password-entry { .prompt-dialog-password-entry {
background-color: SECTION-COLOR; background-color: SECTION-COLOR;
padding: 8px !important;
} }
@@ -44,7 +45,7 @@
.modal-dialog-linked-button, .modal-dialog-linked-button,
.modal-dialog-button-box .modal-dialog-button { .modal-dialog-button-box .modal-dialog-button {
padding: 9px 0; padding: 9px 0 !important;
border-radius: 10px; border-radius: 10px;
} }

View File

@@ -1,33 +1,33 @@
/* if first button: margin-right: 12px/2 */ /* if first button: margin-right: 8px/2 */
.modal-dialog-linked-button:ltr:first-child, .modal-dialog-linked-button:ltr:first-child,
.notification-button:ltr:first-child, .notification-button:ltr:first-child,
.hotplug-notification-item:ltr:first-child, .hotplug-notification-item:ltr:first-child,
.modal-dialog-linked-button:rtl:last-child, .modal-dialog-linked-button:rtl:last-child,
.notification-button:rtl:last-child, .notification-button:rtl:last-child,
.hotplug-notification-item:rtl:last-child { .hotplug-notification-item:rtl:last-child {
margin: 0 6px 0 0 !important; margin: 0 4px 8px 8px !important;
} }
/* if last button: margin-left: 12px/2 */ /* if last button: margin-left: 8px/2 */
.modal-dialog-linked-button:ltr:last-child, .modal-dialog-linked-button:ltr:last-child,
.notification-button:ltr:last-child, .notification-button:ltr:last-child,
.hotplug-notification-item:ltr:last-child, .hotplug-notification-item:ltr:last-child,
.modal-dialog-linked-button:rtl:first-child, .modal-dialog-linked-button:rtl:first-child,
.notification-button:rtl:first-child, .notification-button:rtl:first-child,
.hotplug-notification-item:rtl:first-child { .hotplug-notification-item:rtl:first-child {
margin: 0 0 0 6px !important; margin: 0 8px 8px 4px !important;
} }
/* if only button: normal margin */ /* if only button: normal margin */
.modal-dialog-linked-button:first-child:last-child, .modal-dialog-linked-button:first-child:last-child,
.notification-button:first-child:last-child, .notification-button:first-child:last-child,
.hotplug-notification-item:first-child:last-child { .hotplug-notification-item:first-child:last-child {
margin: 0 !important; margin: 0 8px 8px 8px !important;
} }
/* else: margin-right/left: 12px/2 */ /* else: margin-right/left: 8px/2 */
.modal-dialog-linked-button, .modal-dialog-linked-button,
.notification-button, .notification-button,
.hotplug-notification-item { .hotplug-notification-item {
margin: 0 6px !important; margin: 0 4px 8px 4px !important;
} }