appDisplay: CSS cleanup & fixes for app dialog

- change the container and dialog actor alignments
- pad the container to not have dialog overlap panel
- clean up extraneous app-folder css

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3044>
This commit is contained in:
Sam Hewitt 2023-12-05 16:31:47 -03:30 committed by Marge Bot
parent 0ffddb0cd2
commit 15e0440a8b
2 changed files with 22 additions and 32 deletions

View File

@ -1,13 +1,14 @@
/* App Grid */ /* App Grid */
$app_icon_size: 96px; $app_icon_size: 96px;
$app_folder_size: 720px;
// app icons // app icons
.icon-grid { .icon-grid {
row-spacing: $base_padding * 2; row-spacing: $base_padding * 2;
column-spacing: $base_padding * 2; column-spacing: $base_padding * 2;
max-row-spacing: $base_padding * 7; max-row-spacing: $base_padding * 6;
max-column-spacing: $base_padding * 7; max-column-spacing: $base_padding * 6;
page-padding-top: $base_padding * 4; page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4; page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 3; page-padding-left: $base_padding * 3;
@ -52,22 +53,29 @@ $app_icon_size: 96px;
} }
} }
// expanded folder .app-folder-dialog-container {
// pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
padding-top: $panel_height;
}
// Expanded app folder dialog
.app-folder-dialog { .app-folder-dialog {
width: $app_folder_size;
height: $app_folder_size;
border-radius: $modal_radius * 4; border-radius: $modal_radius * 4;
background-color: $system_overlay_bg_color; background-color: $system_overlay_bg_color;
box-shadow: inset 0 0 0 1px $system_borders_color;
padding: 0 1px;
@if $is_highcontrast { @if $is_highcontrast {
padding: $base_padding*2 2px $base_padding*2 2px; padding: 0 2px;
box-shadow: inset 0 0 0 2px $hc_inset_color; box-shadow: inset 0 0 0 2px $hc_inset_color;
} @else {
padding: $base_padding*2 1px $base_padding*2 1px;
box-shadow: inset 0 0 0 1px $system_borders_color;
} }
& .folder-name-container { & .folder-name-container {
padding: $base_padding * 4 $base_padding * 6 0; padding: $base_padding * 4 $base_padding * 6;
spacing: $base_padding * 2; padding-bottom: 0;
& .folder-name-label, & .folder-name-label,
& .folder-name-entry { & .folder-name-entry {
@ -76,32 +84,14 @@ $app_icon_size: 96px;
& .folder-name-entry { & .folder-name-entry {
width: 12em; width: 12em;
color: $system_fg_color !important;
} }
/* FIXME: this is to keep the label in sync with the entry */
& .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
}
& .icon-grid {
row-spacing: $base_padding * 2;
column-spacing: $base_padding * 5;
page-padding-top: 0;
page-padding-bottom: 0;
page-padding-left: 0;
page-padding-right: 0;
} }
& .page-indicators { & .page-indicators {
margin-bottom: 18px; margin-bottom: $base_padding * 4;
} }
} }
.app-folder-dialog-container {
padding: $base_padding * 2;
width: 720px;
height: 720px;
}
// Rename popup for app folders // Rename popup for app folders

View File

@ -2531,16 +2531,16 @@ export const AppFolderDialog = GObject.registerClass({
style_class: 'app-folder-dialog', style_class: 'app-folder-dialog',
x_expand: true, x_expand: true,
y_expand: true, y_expand: true,
x_align: Clutter.ActorAlign.FILL, x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.FILL, y_align: Clutter.ActorAlign.CENTER,
vertical: true, vertical: true,
}); });
this.child = new St.Bin({ this.child = new St.Bin({
style_class: 'app-folder-dialog-container', style_class: 'app-folder-dialog-container',
child: this._viewBox, child: this._viewBox,
x_align: Clutter.ActorAlign.CENTER, x_align: Clutter.ActorAlign.FILL,
y_align: Clutter.ActorAlign.CENTER, y_align: Clutter.ActorAlign.FILL,
}); });
this._addFolderNameEntry(); this._addFolderNameEntry();