diff --git a/data/theme/_common.scss b/data/theme/_common.scss index 6775ca7ab..aec2f9426 100644 --- a/data/theme/_common.scss +++ b/data/theme/_common.scss @@ -492,7 +492,11 @@ StScrollBar { } } - + + .dash-item-container > StWidget { + padding: 4px 8px; + } + .dash-label { //osd tooltip border-radius: 7px; padding: 4px 12px; @@ -539,21 +543,17 @@ StScrollBar { .app-well-app, .show-apps, .grid-search-result { - & > .overview-icon { + & .overview-icon { @extend %icon_tile; } - &.running > .overview-icon { - text-shadow: black 0px 2px 2px; - } - &:active > .overview-icon, - &:checked > .overview-icon { + &:active .overview-icon, + &:checked .overview-icon { background-color: transparentize(darken($osd_bg_color,10%),.1); //FIXME not working? box-shadow: inset 0 1px 2px $osd_borders_color; } - &:hover > .overview-icon, - &.running:hover > .overview-icon, - &:focus > .overview-icon, - &:selected > .overview-icon { + &:hover .overview-icon, + &:focus .overview-icon, + &:selected .overview-icon { background-color: transparentize($fg_color,.9); transition-duration: 200ms; border-image: none; @@ -561,6 +561,12 @@ StScrollBar { } } + + .app-well-app-running-dot { //running apps indicator + width: 10px; height: 3px; + background-color: $selected_bg_color; + margin-bottom: 2px; //FIXME will happen :) + } %icon_tile { border-radius: 4px; diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index ffda8374c..8995d9042 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -1026,7 +1026,7 @@ StEntry { border-color: #1c1f1f; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); selection-background-color: #215d9c; - selected-color: white; } + selected-color: #ffffff; } StEntry:focus { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); border-color: rgba(154, 154, 142, 0.5); } @@ -1399,6 +1399,9 @@ StScrollBar { width: 24px; height: 24px; } +.dash-item-container > StWidget { + padding: 4px 8px; } + .dash-label { border-radius: 7px; padding: 4px 12px; @@ -1443,35 +1446,35 @@ StScrollBar { background-color: rgba(238, 238, 236, 0.1); transition-duration: 200ms; } -.app-well-app.running > .overview-icon, -.show-apps.running > .overview-icon, -.grid-search-result.running > .overview-icon { - text-shadow: black 0px 2px 2px; } -.app-well-app:active > .overview-icon, .app-well-app:checked > .overview-icon, -.show-apps:active > .overview-icon, -.show-apps:checked > .overview-icon, -.grid-search-result:active > .overview-icon, -.grid-search-result:checked > .overview-icon { +.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, +.show-apps:active .overview-icon, +.show-apps:checked .overview-icon, +.grid-search-result:active .overview-icon, +.grid-search-result:checked .overview-icon { background-color: rgba(23, 25, 26, 0.9); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } -.app-well-app:hover > .overview-icon, .app-well-app.running:hover > .overview-icon, .app-well-app:focus > .overview-icon, .app-well-app:selected > .overview-icon, -.show-apps:hover > .overview-icon, -.show-apps.running:hover > .overview-icon, -.show-apps:focus > .overview-icon, -.show-apps:selected > .overview-icon, -.grid-search-result:hover > .overview-icon, -.grid-search-result.running:hover > .overview-icon, -.grid-search-result:focus > .overview-icon, -.grid-search-result:selected > .overview-icon { +.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, +.show-apps:hover .overview-icon, +.show-apps:focus .overview-icon, +.show-apps:selected .overview-icon, +.grid-search-result:hover .overview-icon, +.grid-search-result:focus .overview-icon, +.grid-search-result:selected .overview-icon { background-color: rgba(238, 238, 236, 0.1); transition-duration: 200ms; border-image: none; background-image: none; } +.app-well-app-running-dot { + width: 10px; + height: 3px; + background-color: #215d9c; + margin-bottom: 2px; } + .search-provider-icon, -.list-search-result, .app-well-app > .overview-icon, -.show-apps > .overview-icon, -.grid-search-result > .overview-icon { +.list-search-result, .app-well-app .overview-icon, +.show-apps .overview-icon, +.grid-search-result .overview-icon { border-radius: 4px; padding: 6px; border: 1px solid transparent; diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 3549f9a9e..440266cad 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -1547,6 +1547,19 @@ const AppIcon = new Lang.Class({ can_focus: true, x_fill: true, y_fill: true }); + + this._dot = new St.Widget({ style_class: 'app-well-app-running-dot', + layout_manager: new Clutter.BinLayout(), + x_expand: true, y_expand: true, + x_align: Clutter.ActorAlign.CENTER, + y_align: Clutter.ActorAlign.END }); + + this._iconContainer = new St.Widget({ layout_manager: new Clutter.BinLayout(), + x_expand: true, y_expand: true }); + + this.actor.set_child(this._iconContainer); + this._iconContainer.add_child(this._dot); + this.actor._delegate = this; if (!iconParams) @@ -1560,7 +1573,7 @@ const AppIcon = new Lang.Class({ iconParams['createIcon'] = Lang.bind(this, this._createIcon); iconParams['setSizeManually'] = true; this.icon = new IconGrid.BaseIcon(app.get_name(), iconParams); - this.actor.set_child(this.icon.actor); + this._iconContainer.add_child(this.icon.actor); this.actor.label_actor = this.icon.label; @@ -1620,9 +1633,9 @@ const AppIcon = new Lang.Class({ _updateRunningStyle: function() { if (this.app.state != Shell.AppState.STOPPED) - this.actor.add_style_class_name('running'); + this._dot.show(); else - this.actor.remove_style_class_name('running'); + this._dot.hide(); }, _setPopupTimeout: function() {