9e5b357b0b
Depending on the available horizontal space, we may want to manipulate the icon grid and scroll view spacing to result in an optimal layout that has space left to preview prev/next pages. The main change here is that, when adapting to the available size, the space given to a page does not necessarily match the available space, as we need to be able to show more than one page at a time. With this decoupling of available and page sizes in place, we now know how much space there is available in order to extend the padding between pages, or the fade effect applied to the previewed pages. Underneath, we rely a bit less on hardcoded CSS paddings, and a bit more on the StScrollView::content-padding property. All put together, gives us proper space management from ultra-wide displays, to display ratios that are close to the optimal grid ratio. Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>
169 lines
3.3 KiB
SCSS
169 lines
3.3 KiB
SCSS
/* App Grid */
|
|
|
|
$app_icon_size: 96px;
|
|
|
|
// app icons
|
|
.icon-grid {
|
|
row-spacing: $base_spacing * 2;
|
|
column-spacing: $base_spacing * 2;
|
|
max-row-spacing: $base_spacing * 12;
|
|
max-column-spacing: $base_spacing * 12;
|
|
page-padding-top: $base_padding * 4;
|
|
page-padding-bottom: $base_padding * 4;
|
|
page-padding-left: $base_padding * 2;
|
|
page-padding-right: $base_padding * 2;
|
|
}
|
|
|
|
/* 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: darken($system_bg_color, 3%);
|
|
border-radius: $base_border_radius + 4px; // same as %icon_tile
|
|
}
|
|
|
|
// expanded folder
|
|
.app-folder-dialog { //style like the dash
|
|
border-radius: $modal_radius * 1.5;
|
|
background-color: $dash_background_color;
|
|
padding: 12px 0px 12px 0px;
|
|
|
|
& .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-padding-left: 0;
|
|
page-padding-right: 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: $base_padding $base_padding * 2 0;
|
|
|
|
.page-indicator-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 10px; // the same as height&width
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
.apps-scroll-view {
|
|
padding: 0;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.page-navigation-hint {
|
|
width: 300px;
|
|
|
|
&.dnd {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
&.next:ltr,
|
|
&.previous:rtl {
|
|
background-gradient-start: rgba(255, 255, 255, 0.05);
|
|
background-gradient-end: transparent;
|
|
background-gradient-direction: horizontal;
|
|
border-radius: 15px 0px 0px 15px;
|
|
}
|
|
|
|
&.previous:ltr,
|
|
&.next:rtl {
|
|
background-gradient-start: transparent;
|
|
background-gradient-end: rgba(255, 255, 255, 0.05);
|
|
background-gradient-direction: horizontal;
|
|
border-radius: 0px 15px 15px 0px;
|
|
}
|
|
}
|
|
|
|
.page-navigation-arrow {
|
|
margin: 6px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|