18cd24e6f4
The code previously was using CSS to define row/column spacing and padding which was combined with a subicon size computed in code relative to the requested icon size. In smaller icon sizes it was possible for the CSS spacing+padding + the size of the two subicons to exceed the requested icon size. This then would lead to the label being pushed down for app folders compared to other icons. Another more severe issue caused by this would happen if the first item in an icon grid was an app folder. Then the calculation for the maximum allowed icon size could be off, leading to all icons in the grid becoming smaller than actually necessary. This commit changes this to use homogeneous row and column layouts to evenly distribute the remaining spacing instead of using a fixed CSS value. Fixes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3069 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1581>
140 lines
2.8 KiB
SCSS
140 lines
2.8 KiB
SCSS
/* App Grid */
|
|
|
|
$app_icon_size: 96px;
|
|
|
|
// app icons
|
|
.icon-grid {
|
|
row-spacing: $base_spacing * 3;
|
|
column-spacing: $base_spacing * 3;
|
|
max-row-spacing: $base_spacing * 12;
|
|
max-column-spacing: $base_spacing * 12;
|
|
page-padding-top: $base_padding * 6;
|
|
page-padding-bottom: $base_padding * 6;
|
|
page-padding-left: $base_padding * 6;
|
|
page-padding-right: $base_padding * 6;
|
|
}
|
|
|
|
/* App Icons */
|
|
|
|
$app_grid_fg_color: #fff;
|
|
|
|
// Icon tiles in the app grid
|
|
.app-well-app,
|
|
%app-well-app {
|
|
@include overview-icon($app_grid_fg_color);
|
|
|
|
.overview-icon.overview-icon-with-label {
|
|
padding: 10px 8px 5px 8px;
|
|
|
|
> StBoxLayout {
|
|
spacing: $base_spacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* App Folders */
|
|
.app-well-app.app-folder {
|
|
background-color: transparentize($osd_bg_color, 0.8);
|
|
border-radius: $base_border_radius + 4px; // same as %icon_tile
|
|
}
|
|
|
|
// expanded folder
|
|
.app-folder-dialog {
|
|
border-radius: $modal_radius * 1.5;
|
|
border: 1px solid $osd_outer_borders_color;
|
|
background-color: transparentize(darken($osd_bg_color,10%), 0.05);
|
|
padding: 12px;
|
|
|
|
& .folder-name-container {
|
|
padding: 24px 36px 0;
|
|
spacing: 12px;
|
|
|
|
& .folder-name-label,
|
|
& .folder-name-entry {
|
|
font-size: 18pt;
|
|
font-weight: 800;
|
|
}
|
|
|
|
& .folder-name-entry { width: 300px }
|
|
|
|
/* FIXME: this is to keep the label in sync with the entry */
|
|
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
|
|
|
|
& .edit-folder-button {
|
|
@extend %button;
|
|
|
|
padding: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 18px;
|
|
|
|
& > StIcon { icon-size: 16px }
|
|
}
|
|
}
|
|
|
|
& .icon-grid {
|
|
row-spacing: $base_spacing * 2;
|
|
column-spacing: $base_spacing * 5;
|
|
page-padding-top: 0;
|
|
page-padding-bottom: 0;
|
|
}
|
|
|
|
& .page-indicators {
|
|
margin-bottom: 18px;
|
|
}
|
|
}
|
|
.app-folder-dialog-container {
|
|
padding: 12px;
|
|
width: 620px;
|
|
height: 620px;
|
|
}
|
|
|
|
// Running app indicator (also shown in dash)
|
|
.app-well-app-running-dot {
|
|
height: 5px;
|
|
width: 5px;
|
|
border-radius:5px;
|
|
background-color: $osd_fg_color;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
// Rename popup for app folders
|
|
.rename-folder-popup {
|
|
.rename-folder-popup-item {
|
|
spacing: $base_spacing;
|
|
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
|
|
}
|
|
}
|
|
|
|
// right-click app menu
|
|
.app-menu,
|
|
.app-well-menu {
|
|
max-width: 27.25em;
|
|
}
|
|
|
|
// App Grid pagination indicators
|
|
.page-indicator {
|
|
padding: 15px 12px 30px;
|
|
|
|
.page-indicator-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 10px; // the same as height&width
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
// Some hacks I don't even know
|
|
.all-apps {
|
|
// horizontal padding to make sure scrollbars or dash don't overlap content
|
|
padding: 0 88px;
|
|
}
|
|
|
|
// shutdown and other actions in the grid
|
|
.system-action-icon {
|
|
background-color: rgba(0,0,0,0.8);
|
|
color: #fff;
|
|
border-radius: 99px;
|
|
icon-size: $app_icon_size * 0.5;
|
|
}
|