Add a setting to adjust the appIcons padding

This commit is contained in:
CharlesG
2018-04-12 17:23:59 -05:00
parent f9040b421a
commit 6a21b1e0ca
7 changed files with 152 additions and 72 deletions

View File

@@ -8,6 +8,12 @@
<property name="step_increment">0.01</property>
<property name="page_increment">0.10000000000000001</property>
</object>
<object class="GtkAdjustment" id="appicon_padding_adjustment">
<property name="lower">0.33000000000000002</property>
<property name="upper">1</property>
<property name="step_increment">0.01</property>
<property name="page_increment">0.10000000000000001</property>
</object>
<object class="GtkBox" id="box_middle_click_options">
<property name="visible">True</property>
<property name="can_focus">False</property>
@@ -2898,7 +2904,7 @@
</object>
</child>
<child>
<object class="GtkListBoxRow" id="listboxrow3">
<object class="GtkListBoxRow" id="margin_listboxrow">
<property name="width_request">100</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
@@ -2947,6 +2953,55 @@
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow" id="appicon_padding_listboxrow">
<property name="width_request">100</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<child>
<object class="GtkGrid" id="appicon_padding_grid">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_left">12</property>
<property name="margin_right">12</property>
<property name="margin_top">12</property>
<property name="margin_bottom">12</property>
<property name="column_spacing">32</property>
<child>
<object class="GtkLabel" id="appicon_padding_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">App Icon Padding
(default is 4)</property>
<property name="xalign">0</property>
</object>
<packing>
<property name="left_attach">0</property>
<property name="top_attach">0</property>
</packing>
</child>
<child>
<object class="GtkScale" id="appicon_padding_scale">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="valign">baseline</property>
<property name="hexpand">True</property>
<property name="adjustment">appicon_padding_adjustment</property>
<property name="round_digits">0</property>
<property name="digits">0</property>
<property name="value_pos">right</property>
<signal name="format-value" handler="appicon_padding_scale_format_value_cb" swapped="no"/>
<signal name="value-changed" handler="appicon_padding_scale_value_changed_cb" swapped="no"/>
</object>
<packing>
<property name="left_attach">1</property>
<property name="top_attach">0</property>
</packing>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
<child type="label_item">

View File

@@ -130,8 +130,12 @@ var taskbarAppIcon = new Lang.Class({
this._focused = tracker.focus_app == this.app;
this._isGroupApps = this._dtpSettings.get_boolean('group-apps');
this._container = new St.Widget({ layout_manager: new Clutter.BinLayout() });
this._dotsContainer = new St.Widget({ layout_manager: new Clutter.BinLayout() });
this.actor.remove_actor(this._iconContainer);
if (appInfo.window) {
let outbox = new St.Widget({ layout_manager: new Clutter.BinLayout() });
let box = new St.BoxLayout();
this._windowTitle = new St.Label({
@@ -145,13 +149,16 @@ var taskbarAppIcon = new Lang.Class({
this._scaleFactorChangedId = St.ThemeContext.get_for_stage(global.stage).connect('changed', () => this._updateWindowTitleStyle());
this.actor.remove_actor(this._iconContainer);
box.add_child(this._iconContainer);
box.add_child(this._windowTitle);
outbox.add_child(box);
this.actor.set_child(outbox);
}
this._dotsContainer.add_child(box);
} else {
this._dotsContainer.add_child(this._iconContainer);
}
this._container.add_child(this._dotsContainer);
this.actor.set_child(this._container);
// Monitor windows-changes instead of app state.
// Keep using the same Id and function callback (that is extended)
@@ -183,32 +190,31 @@ var taskbarAppIcon = new Lang.Class({
this._switchWorkspaceId = global.window_manager.connect('switch-workspace',
Lang.bind(this, this._onSwitchWorkspace));
this._setAppIconPadding();
this._showDots();
this._settingsConnectIds = [
this._dtpSettings.connect('changed::dot-position', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-size', Lang.bind(this, this._updateDotSize)),
this._dtpSettings.connect('changed::dot-style-focused', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-style-unfocused', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-override', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-1', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-2', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-3', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-4', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-unfocused-different', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-unfocused-1', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-unfocused-2', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-unfocused-3', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::dot-color-unfocused-4', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::focus-highlight', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::focus-highlight-color', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::focus-highlight-opacity', Lang.bind(this, this._settingsChangeRefresh)),
this._dtpSettings.connect('changed::group-apps-label-font-size', Lang.bind(this, this._updateWindowTitleStyle)),
this._dtpSettings.connect('changed::group-apps-label-font-color', Lang.bind(this, this._updateWindowTitleStyle)),
this._dtpSettings.connect('changed::group-apps-label-max-width', Lang.bind(this, this._updateWindowTitleStyle)),
this._dtpSettings.connect('changed::group-apps-use-fixed-width', Lang.bind(this, this._updateWindowTitleStyle)),
this._dtpSettings.connect('changed::group-apps-underline-unfocused', Lang.bind(this, this._settingsChangeRefresh))
];
this._dtpSettings.connect('changed::dot-position', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-size', Lang.bind(this, this._updateDotSize));
this._dtpSettings.connect('changed::dot-style-focused', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-style-unfocused', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-override', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-1', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-2', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-3', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-4', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-unfocused-different', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-unfocused-1', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-unfocused-2', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-unfocused-3', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::dot-color-unfocused-4', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::focus-highlight', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::focus-highlight-color', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::focus-highlight-opacity', Lang.bind(this, this._settingsChangeRefresh));
this._dtpSettings.connect('changed::group-apps-label-font-size', Lang.bind(this, this._updateWindowTitleStyle));
this._dtpSettings.connect('changed::group-apps-label-font-color', Lang.bind(this, this._updateWindowTitleStyle));
this._dtpSettings.connect('changed::group-apps-label-max-width', Lang.bind(this, this._updateWindowTitleStyle));
this._dtpSettings.connect('changed::group-apps-use-fixed-width', Lang.bind(this, this._updateWindowTitleStyle));
this._dtpSettings.connect('changed::group-apps-underline-unfocused', Lang.bind(this, this._settingsChangeRefresh));
this.forcedOverview = false;
@@ -333,12 +339,6 @@ var taskbarAppIcon = new Lang.Class({
if(this._scaleFactorChangedId)
St.ThemeContext.get_for_stage(global.stage).disconnect(this._scaleFactorChangedId);
for (let i = 0, l = this._settingsConnectIds.length; i < l; ++i) {
if (this._settingsConnectIds[i]) {
this._dtpSettings.disconnect(this._settingsConnectIds[i]);
}
}
},
onWindowsChanged: function() {
@@ -374,8 +374,6 @@ var taskbarAppIcon = new Lang.Class({
return;
}
let container = this.actor.get_children()[0];
if (!this._isGroupApps) {
this._focusedDots = new St.Widget({
layout_manager: new Clutter.BinLayout(),
@@ -414,12 +412,12 @@ var taskbarAppIcon = new Lang.Class({
this._displayProperIndicator();
}));
container.add_child(this._unfocusedDots);
this._dotsContainer.add_child(this._unfocusedDots);
this._updateCounterClass();
}
container.add_child(this._focusedDots);
this._dotsContainer.add_child(this._focusedDots);
},
_updateDotSize: function() {
@@ -467,8 +465,7 @@ var taskbarAppIcon = new Lang.Class({
},
_setIconStyle: function(isFocused) {
let margin = this._dtpSettings.get_int('appicon-margin');
let inlineStyle = 'margin: 0 ' + margin + 'px;';
let inlineStyle = '';
if(this._dtpSettings.get_boolean('focus-highlight') &&
tracker.focus_app == this.app && !this.isLauncher &&
@@ -497,17 +494,31 @@ var taskbarAppIcon = new Lang.Class({
this._dtpSettings.get_int('focus-highlight-opacity') * 0.01);
}
if(this.actor.get_style() != inlineStyle) {
if(this._dotsContainer.get_style() != inlineStyle) {
if (!this._isGroupApps) {
//when the apps are ungrouped, set the style synchronously so the icons don't jump around on taskbar redraw
this.actor.set_style(inlineStyle);
this._dotsContainer.set_style(inlineStyle);
} else {
//graphical glitches if i dont set this on a timeout
Mainloop.timeout_add(0, Lang.bind(this, function() { this.actor.set_style(inlineStyle); }));
Mainloop.timeout_add(0, Lang.bind(this, function() { this._dotsContainer.set_style(inlineStyle); }));
}
}
},
_setAppIconPadding: function() {
let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
let availSize = Main.panel.actor.get_height() - this._dtpSettings.get_int('dot-size') * scaleFactor * 2;
let padding = this._dtpSettings.get_int('appicon-padding');
let margin = this._dtpSettings.get_int('appicon-margin');
if (padding * 2 > availSize) {
padding = (availSize - 1) * .5;
}
this.actor.set_style('padding: 0 ' + margin + 'px;');
this._iconContainer.set_style('padding: ' + padding + 'px;');
},
popupMenu: function() {
this._removeMenuTimeout();
this.actor.fake_release();
@@ -578,7 +589,7 @@ var taskbarAppIcon = new Lang.Class({
this._focusedDots.hide();
}
} else {
let containerWidth = this.actor.get_children()[0].width;
let containerWidth = this._container.width;
let focusedDotStyle = this._dtpSettings.get_string('dot-style-focused');
let unfocusedDotStyle = this._dtpSettings.get_string('dot-style-unfocused');
let focusedIsWide = this._isWideDotStyle(focusedDotStyle);

View File

@@ -339,6 +339,10 @@ var dtpPanel = new Lang.Class({
this.taskbar.resetAppIcons();
}));
this._dtpSettings.connect('changed::appicon-padding', Lang.bind(this, function() {
this.taskbar.resetAppIcons();
}));
this._dtpSettings.connect('changed::show-activities-button', Lang.bind(this, function() {
this._setActivitiesButtonVisible(this._dtpSettings.get_boolean('show-activities-button'));
}));

View File

@@ -166,6 +166,7 @@ const Settings = new Lang.Class({
this._tray_size_timeout = 0;
this._leftbox_size_timeout = 0;
this._appicon_margin_timeout = 0;
this._appicon_padding_timeout = 0;
this._tray_padding_timeout = 0;
this._statusicon_padding_timeout = 0;
this._leftbox_padding_timeout = 0;
@@ -1097,6 +1098,7 @@ const Settings = new Lang.Class({
{objectName: 'tray_size_scale', valueName: 'tray-size', range: DEFAULT_FONT_SIZES },
{objectName: 'leftbox_size_scale', valueName: 'leftbox-size', range: DEFAULT_FONT_SIZES },
{objectName: 'appicon_margin_scale', valueName: 'appicon-margin', range: DEFAULT_MARGIN_SIZES },
{objectName: 'appicon_padding_scale', valueName: 'appicon-padding', range: DEFAULT_MARGIN_SIZES },
{objectName: 'tray_padding_scale', valueName: 'tray-padding', range: DEFAULT_PADDING_SIZES },
{objectName: 'leftbox_padding_scale', valueName: 'leftbox-padding', range: DEFAULT_PADDING_SIZES },
{objectName: 'statusicon_padding_scale', valueName: 'status-icon-padding', range: DEFAULT_PADDING_SIZES }
@@ -1227,6 +1229,22 @@ const Settings = new Lang.Class({
}));
},
appicon_padding_scale_format_value_cb: function(scale, value) {
return value + ' px';
},
appicon_padding_scale_value_changed_cb: function(scale) {
// Avoid settings the size consinuosly
if (this._appicon_padding_timeout > 0)
Mainloop.source_remove(this._appicon_padding_timeout);
this._appicon_padding_timeout = Mainloop.timeout_add(SCALE_UPDATE_TIMEOUT, Lang.bind(this, function() {
this._settings.set_int('appicon-padding', scale.get_value());
this._appicon_padding_timeout = 0;
return GLib.SOURCE_REMOVE;
}));
},
tray_padding_scale_format_value_cb: function(scale, value) {
return value+ ' px';
},

View File

@@ -385,7 +385,12 @@
<summary>App icon margin</summary>
<description>Set the margin for application icons in the embedded dash.</description>
</key>
<key type="i" name="tray-padding">
<key type="i" name="appicon-padding">
<default>4</default>
<summary>App icon padding</summary>
<description>Set the padding for application icons in the embedded dash.</description>
</key>
<key type="i" name="tray-padding">
<default>-1</default>
<summary>Tray item padding</summary>
<description>Set the size of the tray padding. (-1 for default)</description>

View File

@@ -21,14 +21,8 @@
* Some code was also adapted from the upstream Gnome Shell source code.
*/
#dashtopanelScrollview .dash-item-container > StWidget {
padding: 0;
margin: 0 8px;
}
#dashtopanelScrollview .app-well-app .overview-icon {
border-radius: 0;
padding: 8px;
border: none;
}

View File

@@ -172,8 +172,6 @@ var taskbarActor = new Lang.Class({
* - Sync minimization application target position.
*/
const baseIconSizes = [ 16, 22, 24, 32, 48, 64, 96, 128 ];
var taskbar = new Lang.Class({
Name: 'DashToPanel.Taskbar',
@@ -181,9 +179,8 @@ var taskbar = new Lang.Class({
this._dtpSettings = settings;
// start at smallest size due to running indicator drawing area expanding but not shrinking
this.iconSize = baseIconSizes[0];
this.iconSize = 16;
this._availableIconSizes = baseIconSizes;
this._shownInitially = false;
this._position = getPosition();
@@ -686,29 +683,25 @@ var taskbar = new Lang.Class({
iconChildren.push(this._showAppsIcon);
let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
let iconSizes = this._availableIconSizes.map(function(s) {
return s * scaleFactor;
});
// Getting the panel height and making sure that the icon padding is at
// least the size of the app running indicator on both the top and bottom.
let availSize = Main.panel.actor.get_height() - (this._dtpSettings.get_int('dot-size') * scaleFactor * 2);
let newIconSize = this._availableIconSizes[0];
for (let i = 0; i < iconSizes.length ; i++) {
if (iconSizes[i] < availSize) {
newIconSize = this._availableIconSizes[i];
}
let availSize = Main.panel.actor.get_height() -
(this._dtpSettings.get_int('dot-size') * scaleFactor * 2) -
(this._dtpSettings.get_int('appicon-padding') * 2);
if (availSize == this.iconSize)
return;
if (availSize <= 0) {
availSize = 1;
}
if (newIconSize == this.iconSize)
return;
let oldIconSize = this.iconSize;
this.iconSize = newIconSize;
this.iconSize = availSize;
this.emit('icon-size-changed');
let scale = oldIconSize / newIconSize;
let scale = oldIconSize / this.iconSize;
for (let i = 0; i < iconChildren.length; i++) {
let icon = iconChildren[i].child._delegate.icon;