diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 2fe110fe8..be23f7c8c 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -3,16 +3,60 @@ $app_icon_size: 96px; $app_folder_size: 720px; -// app icons -.icon-grid { - row-spacing: $base_padding * 2; - column-spacing: $base_padding * 2; - max-row-spacing: $base_padding * 6; - max-column-spacing: $base_padding * 6; - page-padding-top: $base_padding * 4; - page-padding-bottom: $base_padding * 4; - page-padding-left: $base_padding * 3; - page-padding-right: $base_padding * 3; +#uiGroup.small-screen-size #appDisplay { + margin-top: $base_padding * 2; + margin-bottom: $base_padding * 2; + + .icon-grid { + row-spacing: 0; + column-spacing: $base_padding * 1; + max-row-spacing: $base_padding * 6; + max-column-spacing: $base_padding * 4; + page-padding-left: $base_padding; + page-padding-right: $base_padding; + } + + StLabel { + font-weight: 400; + @include fontsize(10pt); + } + + .page-indicators { + margin-top: 10px; + } +} + +#uiGroup.normal-screen-size #appDisplay { + margin-top: $base_padding * 2; + margin-bottom: $base_padding * 2; + + .icon-grid { + row-spacing: $base_padding * 2; + column-spacing: $base_padding * 2; + max-row-spacing: $base_padding * 8; + max-column-spacing: $base_padding * 4; + page-padding-left: $base_padding; + page-padding-right: $base_padding; + } + + .page-indicators { + margin-top: 14px; + } +} + +#uiGroup.large-screen-size #appDisplay { + .icon-grid { + row-spacing: $base_padding * 4; + column-spacing: $base_padding * 4; + max-row-spacing: $base_padding * 12; + max-column-spacing: $base_padding * 8; + page-padding-left: $base_padding; + page-padding-right: $base_padding; + } + + .page-indicators { + margin-top: 20px; + } } /* App Icons */ @@ -23,7 +67,6 @@ $app_folder_size: 720px; // override the %tile style border-radius: $base_border_radius*3; - padding: $base_padding * 2; // the icon itself .overview-icon { @@ -119,7 +162,7 @@ $app_folder_size: 720px; // App Grid pagination indicators $page_indicator_size: 10px; .page-indicator { - padding: $base_padding $base_padding * 2 0; + padding: 0 $base_padding 0; transition-duration:400ms; .page-indicator-icon { diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 0ba6a8164..c02c18be7 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -46,7 +46,7 @@ const FOLDER_DIALOG_ANIMATION_TIME = 200; const PAGE_PREVIEW_ANIMATION_TIME = 150; const PAGE_INDICATOR_FADE_TIME = 200; -const PAGE_PREVIEW_RATIO = 0.20; +const PAGE_PREVIEW_RATIO = 0.16; const DRAG_PAGE_SWITCH_INITIAL_TIMEOUT = 1000; const DRAG_PAGE_SWITCH_IMMEDIATELY_THRESHOLD_PX = 20; @@ -204,7 +204,7 @@ export const AppGrid = GObject.registerClass({ const BaseAppViewGridLayout = GObject.registerClass( class BaseAppViewGridLayout extends Clutter.BinLayout { _init(grid, scrollView, nextPageIndicator, nextPageArrow, - previousPageIndicator, previousPageArrow) { + previousPageIndicator, previousPageArrow, pageIndicators) { if (!(grid instanceof AppGrid)) throw new Error('Grid must be an AppGrid subclass'); @@ -216,6 +216,7 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { this._previousPageArrow = previousPageArrow; this._nextPageIndicator = nextPageIndicator; this._nextPageArrow = nextPageArrow; + this._pageIndicators = pageIndicators; grid.connect('pages-changed', () => this._syncPageIndicatorsVisibility()); @@ -415,6 +416,13 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { this._syncPageIndicators(); } + vfunc_get_preferred_height(_container, forWidth) { + const [gridMinH, gridNatH] = this._grid.get_preferred_height(forWidth); + const [, pageIndicatorsH] = this._pageIndicators.get_preferred_height(-1); + + return [gridNatH + pageIndicatorsH, gridNatH + pageIndicatorsH]; + } + vfunc_allocate(container, box) { const ltr = container.get_text_direction() !== Clutter.TextDirection.RTL; const indicatorsWidth = this._getIndicatorsWidth(box); @@ -424,6 +432,10 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { right: indicatorsWidth, }); + this._pageWidth = box.get_width(); + + const [, pageIndicatorsHeight] = this._pageIndicators.get_preferred_height(-1); + box.y2 -= pageIndicatorsHeight; this._scrollView.allocate(box); const leftBox = box.copy(); @@ -439,7 +451,9 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { this._nextPageArrow.allocate_align_fill(ltr ? rightBox : leftBox, 0.5, 0.5, false, false); - this._pageWidth = box.get_width(); + box.y1 = box.y2; + box.y2 = box.y1 + pageIndicatorsHeight; + this._pageIndicators.allocate(box); } goToPage(page, animate = true) { @@ -592,32 +606,24 @@ var BaseAppView = GObject.registerClass({ this._prevPageArrow.connect('clicked', () => this.goToPage(this._grid.currentPage - 1)); - const scrollContainer = new St.Widget({ - clip_to_allocation: true, - y_expand: true, - }); - scrollContainer.add_child(this._scrollView); - scrollContainer.add_child(this._prevPageIndicator); - scrollContainer.add_child(this._nextPageIndicator); - scrollContainer.add_child(this._nextPageArrow); - scrollContainer.add_child(this._prevPageArrow); - scrollContainer.layoutManager = new BaseAppViewGridLayout( + this.add_child(this._scrollView); + this.add_child(this._prevPageIndicator); + this.add_child(this._nextPageIndicator); + this.add_child(this._nextPageArrow); + this.add_child(this._prevPageArrow); + this.add_child(this._pageIndicators); + this.layoutManager = new BaseAppViewGridLayout( this._grid, this._scrollView, this._nextPageIndicator, this._nextPageArrow, this._prevPageIndicator, - this._prevPageArrow); - this._appGridLayout = scrollContainer.layoutManager; - scrollContainer._delegate = this; + this._prevPageArrow, + this._pageIndicators); + this._appGridLayout = this.layoutManager; + //scrollContainer._delegate = this; - this._box = new St.BoxLayout({ - vertical: true, - x_expand: true, - y_expand: true, - }); - this._box.add_child(scrollContainer); - this._box.add_child(this._pageIndicators); + // this.add_child(scrollContainer); // Swipe this._swipeTracker = new SwipeTracker.SwipeTracker(this._scrollView, @@ -1347,16 +1353,15 @@ export const AppDisplay = GObject.registerClass( class AppDisplay extends BaseAppView { _init() { super._init({ - layout_manager: new Clutter.BinLayout(), + clip_to_allocation: true, x_expand: true, y_expand: true, + name: 'appDisplay', }); this._pageManager = new PageManager(); this._pageManager.connect('layout-changed', () => this._redisplay()); - this.add_child(this._box); - this._folderIcons = []; this._currentDialog = null; @@ -2121,7 +2126,7 @@ export const FolderView = GObject.registerClass( class FolderView extends BaseAppView { _init(folder, id, parentView) { super._init({ - layout_manager: new Clutter.BinLayout(), + clip_to_allocation: true, x_expand: true, y_expand: true, gesture_modes: Shell.ActionMode.POPUP, @@ -2135,8 +2140,6 @@ class FolderView extends BaseAppView { this._parentView = parentView; this._grid._delegate = this; - this.add_child(this._box); - this._deletingFolder = false; this._apps = []; this._redisplay(); diff --git a/js/ui/layout.js b/js/ui/layout.js index 3b54960f8..918868112 100644 --- a/js/ui/layout.js +++ b/js/ui/layout.js @@ -601,6 +601,31 @@ export const LayoutManager = GObject.registerClass({ } } + _updateMonitorSizeCssClass() { + if (!this.primaryMonitor) + return; + + const oldMonitorSizeCssClass = this._monitorSizeCssClass; + const smallestDimensionSizePx = + this.primaryMonitor.width > this.primaryMonitor.height + ? this.primaryMonitor.height + : this.primaryMonitor.width; + + if (smallestDimensionSizePx < 900) + this._monitorSizeCssClass = "small-screen-size"; + else if (smallestDimensionSizePx < 1200) + this._monitorSizeCssClass = "normal-screen-size"; + else + this._monitorSizeCssClass = "large-screen-size"; + + if (oldMonitorSizeCssClass === this._monitorSizeCssClass) + return; + + if (oldMonitorSizeCssClass) + this.uiGroup.remove_style_class_name(oldMonitorSizeCssClass); + this.uiGroup.add_style_class_name(this._monitorSizeCssClass); + } + _monitorsChanged() { this._updateMonitors(); this._updateBoxes(); @@ -608,6 +633,7 @@ export const LayoutManager = GObject.registerClass({ this._updateBackgrounds(); this._updateFullscreen(); this._updateVisibility(); + this._updateMonitorSizeCssClass(); this._queueUpdateRegions(); this.emit('monitors-changed'); diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js index a52aa85d2..18a5803d9 100644 --- a/js/ui/overviewControls.js +++ b/js/ui/overviewControls.js @@ -19,7 +19,7 @@ import * as WindowManager from './windowManager.js'; import * as WorkspaceThumbnail from './workspaceThumbnail.js'; import * as WorkspacesView from './workspacesView.js'; -export const SMALL_WORKSPACE_RATIO = 0.15; +export const SMALL_WORKSPACE_RATIO = 0.18; const DASH_MAX_HEIGHT_RATIO = 0.16; const VERTICAL_SPACING_RATIO = 0.02; const THUMBNAILS_SPACING_ADJUSTMENT_TOP = 0.6;