applications/gnome-control-center
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

network: Update design of the WiFi list.

Browse source 
https://gitlab.gnome.org/Teams/Design/settings-mockups/raw/master/wifi/wifi-list.png

Fixes https://gitlab.gnome.org/GNOME/gnome-control-center/-/issues/1185
This commit is contained in:
Robert Ancell 2020-11-10 09:27:56 +13:00
parent 3beaa9d158
commit 64a2e54ec6
5 changed files with 174 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

20
panels/network/cc-wifi-connection-row.c
View file

@ -32,7 +32,7 @@ struct _CcWifiConnectionRow
GPtrArray *aps;
NMConnection *connection;
GtkImage *active_icon;
GtkLabel *active_label;
GtkStack *button_stack;
GtkCheckButton *checkbutton;
GtkSpinner *connecting_spinner;
@ -255,40 +255,40 @@ update_ui (CcWifiConnectionRow *self)
gtk_stack_set_visible_child_name (self->button_stack, "empty");
}
gtk_widget_set_visible (GTK_WIDGET (self->active_icon), active);
gtk_widget_set_visible (GTK_WIDGET (self->active_label), active);
if (security != NM_AP_SEC_UNKNOWN && security != NM_AP_SEC_NONE && security != NM_AP_SEC_OWE)
{
gchar *icon_name;
const gchar *icon_path;
gtk_widget_set_child_visible (GTK_WIDGET (self->encrypted_icon), TRUE);
if (security == NM_AP_SEC_WEP)
{
icon_name = "channel-insecure-symbolic";
icon_path = "/org/gnome/control-center/network/warning-small-symbolic.svg";
gtk_widget_set_tooltip_text (GTK_WIDGET (self->encrypted_icon), _("Insecure network (WEP)"));
}
else if (security == NM_AP_SEC_WPA)
{
icon_name = "network-wireless-encrypted-symbolic";
icon_path = "/org/gnome/control-center/network/lock-small-symbolic.svg";
gtk_widget_set_tooltip_text (GTK_WIDGET (self->encrypted_icon), _("Secure network (WPA)"));
}
else if (security == NM_AP_SEC_WPA2)
{
icon_name = "network-wireless-encrypted-symbolic";
icon_path = "/org/gnome/control-center/network/lock-small-symbolic.svg";
gtk_widget_set_tooltip_text (GTK_WIDGET (self->encrypted_icon), _("Secure network (WPA2)"));
}
else if (security == NM_AP_SEC_SAE)
{
icon_name = "network-wireless-encrypted-symbolic";
icon_path = "/org/gnome/control-center/network/lock-small-symbolic.svg";
gtk_widget_set_tooltip_text (GTK_WIDGET (self->encrypted_icon), _("Secure network (WPA3)"));
}
else
{
icon_name = "network-wireless-encrypted-symbolic";
icon_path = "/org/gnome/control-center/network/lock-small-symbolic.svg";
gtk_widget_set_tooltip_text (GTK_WIDGET (self->encrypted_icon), _("Secure network"));
}
g_object_set (self->encrypted_icon, "icon-name", icon_name, NULL);
gtk_image_set_from_resource (self->encrypted_icon, icon_path);
}
else
{
@ -458,7 +458,7 @@ cc_wifi_connection_row_class_init (CcWifiConnectionRowClass *klass)
gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/control-center/network/cc-wifi-connection-row.ui");
gtk_widget_class_bind_template_child (widget_class, CcWifiConnectionRow, active_icon);
gtk_widget_class_bind_template_child (widget_class, CcWifiConnectionRow, active_label);
gtk_widget_class_bind_template_child (widget_class, CcWifiConnectionRow, button_stack);
gtk_widget_class_bind_template_child (widget_class, CcWifiConnectionRow, checkbutton);
gtk_widget_class_bind_template_child (widget_class, CcWifiConnectionRow, connecting_spinner);

56
panels/network/cc-wifi-connection-row.ui
View file

@ -26,52 +26,49 @@
</child>
</object>
</child>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="valign">center</property>
<property name="margin_right">6</property>
<child>
<object class="GtkImage" id="strength_icon">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_right">6</property>
<property name="icon_name">network-wireless-signal-excellent-symbolic</property>
<property name="icon_size">1</property>
</object>
</child>
<child>
<object class="GtkLabel" id="name_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="margin_top">12</property>
<property name="margin_bottom">12</property>
<property name="label" translatable="no">Connection/SSID</property>
<property name="ellipsize">end</property>
</object>
</child>
<child>
<object class="GtkImage" id="active_icon">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">object-select-symbolic</property>
<property name="icon_size">1</property>
</object>
</child>
<child>
<object class="GtkImage" id="encrypted_icon">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="hexpand">True</property>
<property name="halign">end</property>
<property name="icon_name">network-wireless-encrypted-symbolic</property>
<property name="icon_size">1</property>
<property name="valign">end</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkSeparator" id="configure_separator">
<object class="GtkLabel" id="name_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_bottom">6</property>
<property name="margin_left">6</property>
<property name="margin_right">6</property>
<property name="margin_top">6</property>
<property name="halign">start</property>
<property name="hexpand">True</property>
<property name="margin_top">12</property>
<property name="margin_bottom">12</property>
<property name="label" translatable="no">Connection/SSID</property>
<property name="ellipsize">end</property>
</object>
</child>
<child>
<object class="GtkLabel" id="active_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_end">6</property>
<property name="label" translatable="yes">Connected</property>
<style>
<class name="dim-label"/>
</style>
</object>
</child>
<child>
@ -105,7 +102,6 @@
</child>
<style>
<class name="image-button"/>
<class name="circular"/>
</style>
</object>
<packing>

74
panels/network/lock-small-symbolic.svg Normal file
View file

@ -0,0 +1,74 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10"
height="10"
viewBox="0 0 10 10"
version="1.1"
id="svg5"
sodipodi:docname="lock-small-symbolic.svg"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
<metadata
id="metadata11">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs9" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1016"
id="namedview7"
showgrid="true"
inkscape:zoom="50.383226"
inkscape:cx="8.3347858"
inkscape:cy="3.7007884"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg5"
inkscape:document-rotation="0">
<inkscape:grid
type="xygrid"
id="grid831" />
</sodipodi:namedview>
<g
id="g856"
transform="translate(12.40027)">
<rect
ry="0"
y="4"
x="-11.40027"
height="6"
width="8"
id="rect13312"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none" />
<path
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#2e3436;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
d="M -9.40027,6 V 3 c 2.5e-4,-2 2.00025,-2 2.00025,-2 0,0 2,0 2,2 v 3"
id="path13000"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

2
panels/network/network.gresource.xml
View file

@ -14,5 +14,7 @@
<!-- Wi-Fi panel -->
<file preprocess="xml-stripblanks">cc-wifi-panel.ui</file>
<file preprocess="xml-stripblanks">lock-small-symbolic.svg</file>
<file preprocess="xml-stripblanks">warning-small-symbolic.svg</file>
</gresource>
</gresources>

64
panels/network/warning-small-symbolic.svg Normal file
View file

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10"
height="10"
viewBox="0 0 10 10"
version="1.1"
id="svg5"
sodipodi:docname="warning-small-symbolic.svg"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
<metadata
id="metadata11">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs9" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1016"
id="namedview7"
showgrid="false"
inkscape:zoom="20.172754"
inkscape:cx="8.1840485"
inkscape:cy="-4.2164187"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg5"
inkscape:document-rotation="0">
<inkscape:grid
type="xygrid"
id="grid831" />
</sodipodi:namedview>
<g
id="g868"
style="opacity:1">
<path
id="path872"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f57900;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
d="M 5.0136719 0 C 4.6299657 -0.00525415 4.2770886 0.20950752 4.1054688 0.55273438 L 0.10546875 8.5527344 C -0.22691966 9.2176835 0.2566028 9.9999764 1 10 L 9 10 C 9.7433972 9.9999764 10.22692 9.2176835 9.8945312 8.5527344 L 5.8945312 0.55273438 C 5.7273166 0.21831824 5.3875286 0.00510321 5.0136719 0 z M 4 3 L 6 3 L 6 5.5 C 6 5.5 6 6 5.5 6 L 4.5 6 C 4 6 4 5.5 4 5.5 L 4 3 z M 4.5 7 L 5.5 7 C 5.777 7 6 7.223 6 7.5 L 6 8.5 C 6 8.777 5.777 9 5.5 9 L 4.5 9 C 4.223 9 4 8.777 4 8.5 L 4 7.5 C 4 7.223 4.223 7 4.5 7 z " />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB