[gnome-devel-docs] HIG: add pages for in-app notifications and info bars
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] HIG: add pages for in-app notifications and info bars
- Date: Mon, 27 Jul 2015 16:09:18 +0000 (UTC)
commit 6c82e3ba10f6dc89c16fe55ef060ce3ee1a08ee1
Author: Allan Day <allanpday gmail com>
Date: Mon Jul 27 16:16:27 2015 +0100
HIG: add pages for in-app notifications and info bars
We have been missing guidelines for these two design patterns.
https://bugzilla.gnome.org/show_bug.cgi?id=398334
https://bugzilla.gnome.org/show_bug.cgi?id=752820
hig/C/figures/patterns/in-app-notification.svg | 338 +++++++++++++++++++++++
hig/C/figures/patterns/info-bar.svg | 350 ++++++++++++++++++++++++
hig/C/in-app-notifications.page | 45 +++
hig/C/info-bars.page | 54 ++++
4 files changed, 787 insertions(+), 0 deletions(-)
---
diff --git a/hig/C/figures/patterns/in-app-notification.svg b/hig/C/figures/patterns/in-app-notification.svg
new file mode 100644
index 0000000..3053759
--- /dev/null
+++ b/hig/C/figures/patterns/in-app-notification.svg
@@ -0,0 +1,338 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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="940"
+ height="540"
+ id="svg6276"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="in-app-notification.svg">
+ <defs
+ id="defs6278">
+ <clipPath
+ clipPathUnits="userSpaceOnUse"
+ id="clipPath4251">
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ y="609.36218"
+ x="127.00001"
+ height="386"
+ width="685"
+ id="rect4253"
+
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ mask="none" />
+ </clipPath>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="349.63129"
+ inkscape:cy="350.77384"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:showpageshadow="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="1136"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:snap-nodes="false"
+ inkscape:snap-bbox="true"
+ inkscape:bbox-paths="true"
+ inkscape:bbox-nodes="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid6749"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata6281">
+ <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>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-512.36218)">
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ style="fill:#f2f2f2;fill-opacity:1;stroke:#a7aba7;stroke-width:0.99999994;stroke-opacity:1"
+ id="rect6248"
+ width="685"
+ height="106"
+ x="127.5"
+ y="568.86218"
+ rx="9"
+ ry="9" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ y="609.86218"
+ x="127.5"
+ height="386"
+ width="685"
+ id="rect6250"
+
style="fill:#e9e9e9;fill-opacity:1;stroke:#a7a7a7;stroke-width:0.99999994;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ mask="none" />
+ <g
+ style="display:inline;fill:#888a85"
+ id="g6254"
+ transform="translate(724.0016,63.3622)" />
+ <g
+ id="g6256"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6258"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6260"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g6262"
+ transform="translate(19,-242)">
+ <path
+
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale
Mono';-inkscape-font-specification:'Andale
Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#888a85;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new"
+ id="path6264"
+ d="m 45,764 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858
0.6875,0.3125 L 49,766.59375 51.3125,764.3125 C 51.578125,764.082 51.759172,764.007 52,764 l 1,0 0,1 c
0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 52.906938,770.46942 52.999992,770.7347
53,771 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 49,769.4375 46.71875,771.71875 C
46.530586,771.90694 46.26529,772 46,772 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 l
2.28125,-2.25 L 45.28125,765.75 C 45.070508,765.55537 44.97809,765.28075 45,765 l 0,-1 z"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ <g
+ id="g6266"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6268"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6270"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <path
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+
style="display:inline;fill:none;stroke:#a7a7a7;stroke-width:0.99999988px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 771.5,580.8569 0,17.0103"
+ id="path6272"
+ inkscape:connector-curvature="0" />
+ <g
+ inkscape:label="status"
+ transform="translate(643.49813,-206.1693)"
+ id="g6280"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="devices"
+ transform="translate(643.49813,-206.1693)"
+ id="g6282" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="apps"
+ transform="translate(643.49813,-206.1693)"
+ id="g6284" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="places"
+ transform="translate(643.49813,-206.1693)"
+ id="g6286" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="mimetypes"
+ transform="translate(643.49813,-206.1693)"
+ id="g6288" />
+ <g
+ inkscape:label="emblems"
+ transform="translate(643.49813,-206.1693)"
+ id="g6290"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ inkscape:label="emotes"
+ transform="translate(643.49813,-206.1693)"
+ id="g6292"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ inkscape:label="categories"
+ transform="translate(643.49813,-206.1693)"
+ id="g6294"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ style="display:inline;fill:#2e3436"
+ id="g6304"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="status" />
+ <g
+ id="g6306"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="devices"
+ style="fill:#2e3436" />
+ <g
+ id="g6308"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="apps"
+ style="fill:#2e3436" />
+ <g
+ id="g6316"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="places"
+ style="fill:#2e3436" />
+ <g
+ id="g6318"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="mimetypes"
+ style="fill:#2e3436" />
+ <g
+ style="display:inline;fill:#2e3436"
+ id="g6320"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="emblems" />
+ <g
+ style="display:inline;fill:#2e3436"
+ id="g6322"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="categories" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="status"
+ id="g6326" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="devices"
+ id="g6328" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ inkscape:label="apps"
+ id="g6330"
+ style="fill:#2e3436" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="places"
+ id="g6332" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ inkscape:label="mimetypes"
+ id="g6334"
+ style="fill:#2e3436" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="emblems"
+ id="g6336" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="emotes"
+ id="g6338" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="categories"
+ id="g6340" />
+ <rect
+ ry="9"
+ rx="9"
+ y="550.86218"
+ x="250.5"
+ height="106"
+ width="439"
+ id="rect3402"
+
style="opacity:0.5;fill:#393f3f;fill-opacity:1;stroke:#1d2020;stroke-width:0.99999982;stroke-opacity:1"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"
+ clip-path="url(#clipPath4251)" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ ry="3"
+ rx="3"
+ y="617.86218"
+ x="567.49994"
+ height="31"
+ width="69"
+ id="rect3404"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#393f3f;fill-opacity:1;fill-rule:nonzero;stroke:#1d2020;stroke-width:0.99999994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
+ <text
+ xml:space="preserve"
+
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:'Cantarell
Bold';text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
+ x="268.75293"
+ y="638.15717"
+ id="text4210"
+ sodipodi:linespacing="125%"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><tspan
+ sodipodi:role="line"
+ id="tspan4212"
+ x="268.75293"
+ y="638.15717">Event message</tspan></text>
+ <text
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ sodipodi:linespacing="125%"
+ id="text4214"
+ y="638.15717"
+ x="602.32971"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;"
+ xml:space="preserve"><tspan
+ y="638.15717"
+ x="602.32971"
+ id="tspan4216"
+ sodipodi:role="line">Action</tspan></text>
+ <g
+ style="fill:#ffffff"
+ transform="translate(596.0016,107.3623)"
+ id="g4218">
+ <g
+ transform="translate(19,-242)"
+ id="g4220"
+ style="display:inline;fill:#ffffff">
+ <path
+ inkscape:connector-curvature="0"
+ d="m 45,764 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858
0.6875,0.3125 L 49,766.59375 51.3125,764.3125 C 51.578125,764.082 51.759172,764.007 52,764 l 1,0 0,1 c
0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 52.906938,770.46942 52.999992,770.7347
53,771 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 49,769.4375 46.71875,771.71875 C
46.530586,771.90694 46.26529,772 46,772 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 l
2.28125,-2.25 L 45.28125,765.75 C 45.070508,765.55537 44.97809,765.28075 45,765 l 0,-1 z"
+ id="path4222"
+
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale
Mono';-inkscape-font-specification:'Andale
Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new"
/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/hig/C/figures/patterns/info-bar.svg b/hig/C/figures/patterns/info-bar.svg
new file mode 100644
index 0000000..22171e4
--- /dev/null
+++ b/hig/C/figures/patterns/info-bar.svg
@@ -0,0 +1,350 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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="940"
+ height="540"
+ id="svg6276"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="info-bar.svg">
+ <defs
+ id="defs6278">
+ <clipPath
+ clipPathUnits="userSpaceOnUse"
+ id="clipPath4251">
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ y="609.36218"
+ x="127.00001"
+ height="386"
+ width="685"
+ id="rect4253"
+
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ mask="none" />
+ </clipPath>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="657.73022"
+ inkscape:cy="354.36376"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:showpageshadow="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="1136"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:snap-nodes="false"
+ inkscape:snap-bbox="true"
+ inkscape:bbox-paths="true"
+ inkscape:bbox-nodes="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid6749"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata6281">
+ <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>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-512.36218)">
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ style="fill:#f2f2f2;fill-opacity:1;stroke:#a7aba7;stroke-width:0.99999994;stroke-opacity:1"
+ id="rect6248"
+ width="685"
+ height="106"
+ x="127.5"
+ y="568.86218"
+ rx="9"
+ ry="9" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ y="609.86218"
+ x="127.5"
+ height="386"
+ width="685"
+ id="rect6250"
+
style="fill:#e9e9e9;fill-opacity:1;stroke:#a7a7a7;stroke-width:0.99999994;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ mask="none" />
+ <g
+ style="display:inline;fill:#888a85"
+ id="g6254"
+ transform="translate(724.0016,63.3622)" />
+ <g
+ id="g6256"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6258"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6260"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g6262"
+ transform="translate(19,-242)">
+ <path
+
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale
Mono';-inkscape-font-specification:'Andale
Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#888a85;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new"
+ id="path6264"
+ d="m 45,764 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858
0.6875,0.3125 L 49,766.59375 51.3125,764.3125 C 51.578125,764.082 51.759172,764.007 52,764 l 1,0 0,1 c
0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 52.906938,770.46942 52.999992,770.7347
53,771 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 49,769.4375 46.71875,771.71875 C
46.530586,771.90694 46.26529,772 46,772 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 l
2.28125,-2.25 L 45.28125,765.75 C 45.070508,765.55537 44.97809,765.28075 45,765 l 0,-1 z"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ <g
+ id="g6266"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6268"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <g
+ id="g6270"
+ transform="translate(724.0016,63.3622)"
+ style="fill:#888a85" />
+ <path
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+
style="display:inline;fill:none;stroke:#a7a7a7;stroke-width:0.99999988px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 771.5,580.8569 0,17.0103"
+ id="path6272"
+ inkscape:connector-curvature="0" />
+ <g
+ inkscape:label="status"
+ transform="translate(643.49813,-206.1693)"
+ id="g6280"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="devices"
+ transform="translate(643.49813,-206.1693)"
+ id="g6282" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="apps"
+ transform="translate(643.49813,-206.1693)"
+ id="g6284" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="places"
+ transform="translate(643.49813,-206.1693)"
+ id="g6286" />
+ <g
+ style="fill:#2e3436;fill-opacity:1"
+ inkscape:label="mimetypes"
+ transform="translate(643.49813,-206.1693)"
+ id="g6288" />
+ <g
+ inkscape:label="emblems"
+ transform="translate(643.49813,-206.1693)"
+ id="g6290"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ inkscape:label="emotes"
+ transform="translate(643.49813,-206.1693)"
+ id="g6292"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ inkscape:label="categories"
+ transform="translate(643.49813,-206.1693)"
+ id="g6294"
+ style="display:inline;fill:#2e3436;fill-opacity:1" />
+ <g
+ style="display:inline;fill:#2e3436"
+ id="g6304"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="status" />
+ <g
+ id="g6306"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="devices"
+ style="fill:#2e3436" />
+ <g
+ id="g6308"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="apps"
+ style="fill:#2e3436" />
+ <g
+ id="g6316"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="places"
+ style="fill:#2e3436" />
+ <g
+ id="g6318"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="mimetypes"
+ style="fill:#2e3436" />
+ <g
+ style="display:inline;fill:#2e3436"
+ id="g6320"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="emblems" />
+ <g
+ style="display:inline;fill:#2e3436"
+ id="g6322"
+ transform="translate(528.9909,-64.63855)"
+ inkscape:label="categories" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="status"
+ id="g6326" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="devices"
+ id="g6328" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ inkscape:label="apps"
+ id="g6330"
+ style="fill:#2e3436" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="places"
+ id="g6332" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ inkscape:label="mimetypes"
+ id="g6334"
+ style="fill:#2e3436" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="emblems"
+ id="g6336" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="emotes"
+ id="g6338" />
+ <g
+ transform="translate(679.9998,-367.63781)"
+ style="display:inline;fill:#2e3436"
+ inkscape:label="categories"
+ id="g6340" />
+ <rect
+ mask="none"
+
style="fill:#4a90d9;fill-opacity:1;stroke:#4a90d9;stroke-width:1;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="rect4274"
+ width="685"
+ height="53"
+ x="127.5"
+ y="609.86218"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ ry="3"
+ rx="3"
+ y="620.86218"
+ x="687.49994"
+ height="31"
+ width="69"
+ id="rect3404"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#4a90d9;fill-opacity:1;fill-rule:nonzero;stroke:#1c5288;stroke-width:0.99999994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
+ <text
+ xml:space="preserve"
+
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:'Cantarell
Bold';text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
+ x="142.75293"
+ y="632.15717"
+ id="text4210"
+ sodipodi:linespacing="125%"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><tspan
+ sodipodi:role="line"
+ id="tspan4212"
+ x="142.75293"
+ y="632.15717">Status message</tspan></text>
+ <text
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ sodipodi:linespacing="125%"
+ id="text4214"
+ y="641.15021"
+ x="722.32971"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none"
+ xml:space="preserve"><tspan
+ y="641.15021"
+ x="722.32971"
+ id="tspan4216"
+ sodipodi:role="line">Action</tspan></text>
+ <text
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar.png"
+ sodipodi:linespacing="125%"
+ id="text4276"
+ y="650.15717"
+ x="142.75293"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
+ xml:space="preserve"><tspan
+ y="650.15717"
+ x="142.75293"
+ id="tspan4278"
+ sodipodi:role="line">Longer explanation of what is happening.</tspan></text>
+ <g
+ style="fill:#ffffff"
+ transform="translate(718.0016,110.3623)"
+ id="g4280">
+ <g
+ transform="translate(19,-242)"
+ id="g4282"
+ style="display:inline;fill:#ffffff">
+ <path
+ inkscape:connector-curvature="0"
+ d="m 45,764 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858
0.6875,0.3125 L 49,766.59375 51.3125,764.3125 C 51.578125,764.082 51.759172,764.007 52,764 l 1,0 0,1 c
0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 52.906938,770.46942 52.999992,770.7347
53,771 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 49,769.4375 46.71875,771.71875 C
46.530586,771.90694 46.26529,772 46,772 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 l
2.28125,-2.25 L 45.28125,765.75 C 45.070508,765.55537 44.97809,765.28075 45,765 l 0,-1 z"
+ id="path4284"
+
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale
Mono';-inkscape-font-specification:'Andale
Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new"
/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/hig/C/in-app-notifications.page b/hig/C/in-app-notifications.page
new file mode 100644
index 0000000..3a8b2c0
--- /dev/null
+++ b/hig/C/in-app-notifications.page
@@ -0,0 +1,45 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:uix="http://projectmallard.org/experimental/ui/";
+ type="topic"
+ id="in-app-notifications">
+
+ <info>
+ <link type="guide" xref="patterns#primary"/>
+ <desc>Application event notifications</desc>
+ <credit type="author">
+ <name>Allan Day</name>
+ <email>aday gnome org</email>
+ </credit>
+ <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+ </info>
+
+<title>In-app notifications</title>
+
+<media type="image" mime="image/svg" src="figures/patterns/in-app-notification.svg"/>
+
+<p>Information popups which can be displayed inside an application. An in-app notification includes a label
which describes an event which has happened, and can also include a button that allows the user to respond.
They are always transient and user dismissable.</p>
+
+<section id="when-to-use">
+<title>When to use</title>
+
+<p>In-app notifications are appropriate when you want to inform the user about an event that is relevant and
specific to their ongoing use of the application. They are best used to provide immediate feedback. This
contrasts with <link xref="notifications">standard notifications</link>, which alert the user whatever
application they are using, and which persist after the notification has been initially displayed.</p>
+
+<p>Allowing the user to undo a destructive action is a good example of an in-app notification: it is an
immediate response to user action, is most relevant within a short space of time, and provides a button that
allows the user to respond.</p>
+
+<p>In-app notifications are not a good solution for communicating ongoing states. <link
xref="info-bars">Info bars</link> and progress <link xref="progress-spinners">spinners</link> and <link
xref="progress-bars">bars</link> offer some alternatives here.</p>
+
+</section>
+
+<section id="guidelies">
+<title>Guidelines</title>
+
+<list>
+<item><p>It isn't always necessary to include an action button in an in-app notification: only include one
if it is directly related to the event, and is generally useful.</p></item>
+<item><p>Don't distract with unnecessary in-app notifications, such as alerting to irrelevant background
processes.</p></item>
+<item><p>Be careful not to overuse in-app notifications: they can be annoying if they pop up
frequently.</p></item>
+<item><p>Only one in-app notification can be displayed at a time, and new instances should replace existing
ones.</p></item>
+</list>
+
+</section>
+
+</page>
diff --git a/hig/C/info-bars.page b/hig/C/info-bars.page
new file mode 100644
index 0000000..bd42b77
--- /dev/null
+++ b/hig/C/info-bars.page
@@ -0,0 +1,54 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:uix="http://projectmallard.org/experimental/ui/";
+ type="topic"
+ id="info-bars">
+
+ <info>
+ <link type="guide" xref="patterns#secondary"/>
+ <desc>Application event notifications</desc>
+ <credit type="author">
+ <name>Allan Day</name>
+ <email>aday gnome org</email>
+ </credit>
+ <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+ </info>
+
+<title>Info bars</title>
+
+<media type="image" mime="image/svg" src="figures/patterns/info-bar.svg"/>
+
+<p>An info bar is a strip that is placed above a content view, directly below the header bar or tool bar. It
contains text, and can also include controls. Info bars persist: they can be permanent, or they can be
dismissed by the user.</p>
+
+<section id="when-to-use">
+<title>When to use</title>
+
+<p>Info bars can be used to communicate ongoing states or supplementary information about a particular
content item or location. For example, an info bar could indicate that a document is out of date or being
edited by other, or that a service relating to a location is not operating.</p>
+
+<p>Since info bars are persistent, they are generally more appropriate for communicating ongoing states
rather than events (<link xref="notifications">notifications</link> or <link
xref="in-app-notifications">in-app notifications</link> are more appropriate here). Info bars should
generally not be shown for short periods of time.</p>
+
+<p>Info bars primarily communicate by using text, and have the advantage that they can include both a
heading and a longer explanation. However, they also take up space and attract attention. If the state you
want to communicate is not critical, or can be communicated through a simple string or icon, you might want
to consider alternative approaches: text or icons can be added elsewhere in your interface, or the appearance
of navigation controls (such as <link xref="view-switchers">view switchers</link>, <link
xref="tabs">tabs</link> or <link xref="sidebar-lists">sidebar</link> lists) can be changed.</p>
+
+</section>
+
+<section id="guidelies">
+<title>Guidelines</title>
+
+<list>
+<item><p>Beware of info bar over-use: they should be an exceptional presence in your interface.</p></item>
+<item><p>Only one info bar should be visable at any one time.</p></item>
+<item><p>Only include a longer explanation if it is really needed: a simple heading can often be
sufficient.</p></item>
+<item><p>Generally speaking, info bars do not require an icon.</p></item>
+</list>
+
+</section>
+
+<section id="api-reference">
+<title>API reference</title>
+
+<list>
+<item><p><link xref="https://developer.gnome.org/gtk3/stable/GtkInfoBar.html";>GtkInfoBar</link></p></item>
+</list>
+
+</section>
+
+</page>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
