Compare commits

...

3 Commits

Author SHA1 Message Date
Allan Day
34e9513e1f adjust UI to new text styles
With the new text styles, some UI needs to adjusted, primarily to
accommodate larger heading text.
2019-06-27 13:52:40 +01:00
Allan Day
40a772c884 theme: Standardise text styles
Initial attempt to use standard text styles, in line with what's
being done for GTK (https://gitlab.gnome.org/GNOME/gtk/issues/1808).

This is just changing the sizes and weights for now. Spacing
adjustments will be required further down the line.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/594
2019-06-27 13:51:14 +01:00
Allan Day
2ccd87ae44 theme: Remove unused message tray counters 2019-06-27 13:51:14 +01:00
4 changed files with 95 additions and 164 deletions

View File

@ -187,7 +187,7 @@ StScrollBar {
/* Modal Dialogs */
.headline { font-size: 110%; }
.headline { @extend %heading; }
.lightbox { background-color: black; }
.flashspot { background-color: white; }
@ -204,8 +204,7 @@ StScrollBar {
}
.run-dialog-button-box { padding-top: 1em; }
.run-dialog-label {
@include fontsize($font-size + 1.1);
font-weight: normal;
@extend %title-4;
color: $fg_color;
padding-bottom: .4em;
}
@ -213,8 +212,8 @@ StScrollBar {
}
.mount-dialog-subject,
.end-session-dialog-subject { //this should be a generic header class
@include fontsize($font-size * 1.3);
.end-session-dialog-subject {
@extend %title-2;
}
/* Message Dialog */
@ -234,12 +233,12 @@ StScrollBar {
}
.message-dialog-title {
font-weight: bold;
@extend %title-2;
}
.message-dialog-subtitle {
@extend %heading;
color: $fg_color;
font-weight: bold;
}
/* End Session Dialog */
@ -253,6 +252,7 @@ StScrollBar {
}
.end-session-dialog-layout {
spacing: 12px;
padding-left: 17px;
&:rtl { padding-right: 17px; }
}
@ -300,7 +300,7 @@ StScrollBar {
}
.end-session-dialog-list-header {
font-weight: bold;
@extend %heading;
&:rtl { text-align: right; }
}
@ -311,12 +311,11 @@ StScrollBar {
.end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name {
font-weight: bold;
@extend %heading;
}
.end-session-dialog-app-list-item-description {
color: darken($fg_color,5%);
font-size: 10pt;
}
/* ShellMountOperation Dialogs */
@ -372,11 +371,6 @@ StScrollBar {
&:rtl { padding-left: 17px; }
}
.mount-dialog-app-list-item-name {
font-size: 10pt;
}
/* Password or Authentication Dialog */
.prompt-dialog {
@ -386,7 +380,7 @@ StScrollBar {
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-content { spacing: 16px; }
.message-dialog-title { color: lighten($fg_color,15%); }
.message-dialog-title { @extend %title-2; color: lighten($fg_color,15%); }
}
.prompt-dialog-description:rtl {
@ -399,13 +393,11 @@ StScrollBar {
}
.prompt-dialog-error-label {
font-size: 10pt;
color: $warning_color;
padding-bottom: 8px;
}
.prompt-dialog-info-label {
font-size: 10pt;
padding-bottom: 8px;
}
@ -414,7 +406,6 @@ StScrollBar {
}
.prompt-dialog-null-label {
font-size: 10pt;
padding-bottom: 8px;
}
@ -470,7 +461,7 @@ StScrollBar {
}
.audio-selection-title {
font-weight: bold;
@extend %title-2;
text-align: center;
}
@ -513,7 +504,7 @@ StScrollBar {
.extension-dialog {
@extend %bubble-panel;
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-title { font-weight: normal; color: $fg_color; }
.message-dialog-title { @extend %title-2; }
}
/* Inhibit-Shortcuts Dialog */
@ -554,9 +545,9 @@ StScrollBar {
&:ltr { padding: .4em 1.75em .4em 0em; }
&:rtl { padding: .4em 0em .4em 1.75em; }
&:checked {
@extend %heading;
background-color: $bg_color;
box-shadow: inset 0 -1px 0px $_bubble_borders_color;
font-weight: bold;
}
&.selected {
background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
@ -627,7 +618,7 @@ StScrollBar {
min-width: 64px;
min-height: 64px;
.osd-monitor-label { font-size: 3em; }
.osd-monitor-label { @extend %title-1; }
.level {
height: 0.6em;
-barlevel-height: 0.6em;
@ -800,8 +791,8 @@ StScrollBar {
/* TOP BAR */
#panel {
@extend %heading;
background-color: black;
font-weight: bold;
height: 1.86em;
font-feature-settings: "tnum";
@ -833,9 +824,9 @@ StScrollBar {
}
.panel-button {
@extend %heading;
-natural-hpadding: 12px;
-minimum-hpadding: 6px;
font-weight: bold;
color: #ccc;
.app-menu-icon {
@ -932,28 +923,28 @@ StScrollBar {
}
.datemenu-today-button .day-label {
@extend %heading;
}
.datemenu-today-button .date-label {
font-size: 1.5em;
font-weight: 300;
@extend %large-title;
}
.world-clocks-header,
.weather-header,
.events-section-title {
.events-section-title,
.calendar-month-label {
@extend %heading;
color: darken($fg_color,40%);
font-weight: bold;
}
.weather-header.location {
font-weight: normal;
font-size: 0.9em;
@extend %caption;
}
.world-clocks-grid,
.weather-grid {
spacing-rows: 0.4em;
spacing-rows: 0.8em;
spacing-columns: 0.8em;
}
@ -961,35 +952,26 @@ StScrollBar {
spacing: 0.4em;
}
.world-clocks-city {
font-weight: bold;
font-size: 0.9em;
}
.world-clocks-time {
color: darken($fg_color,20%);
font-feature-settings: "tnum";
font-size: 1.2em;
font-feature-settings: "tnum";
}
.world-clocks-timezone {
color: $fg_color;
color: darken($fg_color,40%);
font-feature-settings: "tnum";
font-size: 0.9em;
@extend %caption;
}
.weather-forecast-icon {
icon-size: 2.18em;
icon-size: 32px;
}
.weather-forecast-time {
@extend %caption;
color: darken($fg_color,40%);
font-size: 0.8em;
}
.calendar-month-label {
color: lighten($fg_color,5%);
font-weight: bold;
padding: 8px 0;
&:focus {}
}
@ -1007,7 +989,7 @@ StScrollBar {
}
.calendar-day-base {
font-size: 80%;
@extend %caption;
text-align: center;
width: 2.4em; height: 2.4em;
padding: 0.1em;
@ -1021,9 +1003,8 @@ StScrollBar {
border-color: transparent; //avoid jumparound due to today
}
&.calendar-day-heading { //day of week heading
color: lighten($fg_color,5%);
margin-top: 1em;
font-size: 70%;
color: darken($fg_color,40%);
// margin-top: 1em;
}
}
.calendar-day { //border collapse hack - see calendar.js
@ -1038,14 +1019,15 @@ StScrollBar {
color: $insensitive_fg_color;
}
.calendar-today {
font-weight: bold;
@extend %caption-heading;
//color: lighten($fg_color,10%);
//background-color: darken($bg_color,5%);
border: 1px solid $_bubble_borders_color;
}
.calendar-day-with-events {
@extend %caption-heading;
color: lighten($fg_color,10%);
font-weight: bold;
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
}
.calendar-other-month-day {
@ -1053,8 +1035,7 @@ StScrollBar {
opacity: 0.5;
}
.calendar-week-number {
font-size: 70%;
font-weight: bold;
@extend %caption-heading;
width: 2.3em; height: 1.8em;
border-radius: 2px;
padding: 0.5em 0 0;
@ -1111,11 +1092,11 @@ StScrollBar {
}
.message-secondary-bin > .event-time {
color: $fg_color;
font-size: 0.7em;
@extend %caption;
color: darken($fg_color,40%);
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
padding-bottom: 0.13em;
padding-bottom: 1px;
}
.message-secondary-bin > StIcon {
@ -1283,17 +1264,16 @@ StScrollBar {
.nm-dialog-airplane-box { spacing: 12px; }
.nm-dialog-airplane-headline {
font-weight: bold;
@extend %heading;
text-align: center;
}
.nm-dialog-airplane-text { color: $fg_color; }
.nm-dialog-header-icon { icon-size: 32px; }
.nm-dialog-scroll-view { border: 2px solid $borders_color; }
.nm-dialog-header { font-weight: bold; }
.nm-dialog-header { @extend %title-2; }
.nm-dialog-item {
font-size: 110%;
border-bottom: 1px solid $borders_color;
padding: 12px;
spacing: 20px;
@ -1400,7 +1380,7 @@ StScrollBar {
#dash {
@extend %overview-panel;
font-size: 9pt;
@extend %caption;
padding: 4px 0;
border-radius: 0px 9px 9px 0px;
@ -1615,9 +1595,9 @@ StScrollBar {
border: none;
}
// Search status, like "Searching..." and "No results"
%status_text {
font-size: 2em;
font-weight: bold;
@extend %large-title;
color: $osd_fg_color;
}
@ -1626,8 +1606,12 @@ StScrollBar {
.url-highlighter { link-color: lighten($selected_bg_color,10%); }
// Banners
.message-body {
@extend %caption;
padding-top: 2px;
}
.notification-banner {
font-size: 11pt;
width: 34em;
margin: 5px;
border-radius: $medium-radius;
@ -1637,7 +1621,7 @@ StScrollBar {
&:hover { background: $bg_color; }
&, &:focus, &:active {
background-color: $bg_color;
.message-title { color: $fg_color }
.message-title { color: $fg_color; }
.message-content { color: $fg_color; }
}
@ -1664,20 +1648,6 @@ StScrollBar {
border: none;
}
}
.summary-source-counter {
font-size: 10pt;
font-weight: bold;
height: 1.6em; width: 1.6em;
-shell-counter-overlap-x: 3px;
-shell-counter-overlap-y: 3px;
background-color: $selected_bg_color;
color: $selected_fg_color;
border: 2px solid $fg_color;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
}
.secondary-icon { icon-size: 1.09em; }
//chat bubbles
.chat-body { spacing: 5px; }
@ -1694,9 +1664,8 @@ StScrollBar {
&:rtl { padding-left: 0; padding-right: 18pt; }
}
.chat-meta-message {
@extend %caption-heading;
padding-left: 4px;
font-size: 9pt;
font-weight: bold;
color: lighten($fg_color,18%);
&:rtl { padding-left: 0; padding-right: 4px; }
}
@ -1982,8 +1951,7 @@ StScrollBar {
}
}
.login-dialog-not-listed-label {
font-size: 90%;
font-weight: bold;
@extend %heading;
color: darken($osd_fg_color,30%);
padding-top: 1em;
}
@ -2012,8 +1980,7 @@ StScrollBar {
.login-dialog-username,
.user-widget-label {
color: $osd_fg_color;
font-size: 120%;
font-weight: bold;
@extend %title-3;
text-align: left;
padding-left: 15px;
}
@ -2031,7 +1998,6 @@ StScrollBar {
.login-dialog-prompt-label {
color: darken($osd_fg_color, 20%);
font-size: 110%;
padding-top: 1em;
}
@ -2103,7 +2069,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
.screen-shield-notification-label {
font-weight: bold;
@extend %heading;
padding: 0px 0px 0px 12px;
}
@ -2143,9 +2109,9 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
}
.labels { spacing: 4px; }
.notebook-tab {
@extend %heading;
-natural-hpadding: 12px;
-minimum-hpadding: 6px;
font-weight: bold;
color: #ccc;
transition-duration: 100ms;
padding-left: .3em;
@ -2206,7 +2172,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
}
.lg-extension-name {
font-weight: bold;
@extend %heading;
}
.lg-extension-meta {
@ -2219,3 +2185,39 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
border-radius: 4px;
padding: 6px;
}
// text styles
%large-title {
font-weight: 300;
font-size: 24pt;
// letter-spacing: 0.2rem; this breaks the style
}
%title-1 {
font-weight: 800;
font-size: 20pt;
}
%title-2 {
font-weight: 800;
font-size: 15pt;
}
%title-3 {
font-weight: 700;
font-size: 15pt;
}
%title-4 {
font-weight: 700;
font-size: 13pt;
}
%heading {
font-weight: 700;
font-size: 11pt;
}
%caption-heading {
font-weight: 700;
font-size: 9pt;
}
%caption {
font-weight: 400;
font-size: 9pt;
}

View File

@ -310,7 +310,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
case '802-11-wireless':
wirelessSetting = this._connection.get_setting_wireless();
ssid = NM.utils_ssid_to_utf8(wirelessSetting.get_ssid().get_data());
content.title = _("Authentication required by wireless network");
content.title = _("Authentication required");
content.message = _("Passwords or encryption keys are required to access the wireless network “%s”.").format(ssid);
this._getWirelessSecrets(content.secrets, wirelessSetting);
break;
@ -338,7 +338,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
// fall through
case 'cdma':
case 'bluetooth':
content.title = _("Mobile broadband network password");
content.title = _("Mobile broadband password");
content.message = _("A password is required to connect to “%s”.").format(connectionSetting.get_id());
this._getMobileSecrets(content.secrets, connectionType);
break;
@ -683,7 +683,7 @@ var NetworkAgent = class {
case '802-11-wireless':
let wirelessSetting = connection.get_setting_wireless();
let ssid = NM.utils_ssid_to_utf8(wirelessSetting.get_ssid().get_data());
title = _("Authentication required by wireless network");
title = _("Authentication required");
body = _("Passwords or encryption keys are required to access the wireless network “%s”.").format(ssid);
break;
case '802-3-ethernet':

View File

@ -1,6 +1,6 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const { Clutter, Gio, GLib, GObject, Soup, St } = imports.gi;
const { Clutter, Gio, GLib, GObject, Pango, Soup, St } = imports.gi;
const Config = imports.misc.config;
const Dialog = imports.ui.dialog;

View File

@ -616,77 +616,6 @@ class SourceActor extends St.Widget {
}
});
var SourceActorWithLabel = GObject.registerClass(
class SourceActorWithLabel extends SourceActor {
_init(source, size) {
super._init(source, size);
this._counterLabel = new St.Label({ x_align: Clutter.ActorAlign.CENTER,
x_expand: true,
y_align: Clutter.ActorAlign.CENTER,
y_expand: true });
this._counterBin = new St.Bin({ style_class: 'summary-source-counter',
child: this._counterLabel,
layout_manager: new Clutter.BinLayout() });
this._counterBin.hide();
this._counterBin.connect('style-changed', () => {
let themeNode = this._counterBin.get_theme_node();
this._counterBin.translation_x = themeNode.get_length('-shell-counter-overlap-x');
this._counterBin.translation_y = themeNode.get_length('-shell-counter-overlap-y');
});
this.add_actor(this._counterBin);
this._countUpdatedId = this._source.connect('count-updated', this._updateCount.bind(this));
this._updateCount();
this.connect('destroy', () => {
this._source.disconnect(this._countUpdatedId);
});
}
vfunc_allocate(box, flags) {
super.vfunc_allocate(box, flags);
let childBox = new Clutter.ActorBox();
let [minWidth, minHeight, naturalWidth, naturalHeight] = this._counterBin.get_preferred_size();
let direction = this.get_text_direction();
if (direction == Clutter.TextDirection.LTR) {
// allocate on the right in LTR
childBox.x1 = box.x2 - naturalWidth;
childBox.x2 = box.x2;
} else {
// allocate on the left in RTL
childBox.x1 = 0;
childBox.x2 = naturalWidth;
}
childBox.y1 = box.y2 - naturalHeight;
childBox.y2 = box.y2;
this._counterBin.allocate(childBox, flags);
}
_updateCount() {
if (this._actorDestroyed)
return;
this._counterBin.visible = this._source.countVisible;
let text;
if (this._source.count < 100)
text = this._source.count.toString();
else
text = String.fromCharCode(0x22EF); // midline horizontal ellipsis
this._counterLabel.set_text(text);
}
});
var Source = class Source {
constructor(title, iconName) {
this.SOURCE_ICON_SIZE = 48;