Merge lp:~jonas-drange/ulysses/inline-form-feedback into lp:ulysses

Proposed by Jonas G. Drange on 2013-12-05
Status: Needs review
Proposed branch: lp:~jonas-drange/ulysses/inline-form-feedback
Merge into: lp:ulysses
Diff against target: 268 lines (+101/-83)
3 files modified
.csslintrc (+2/-1)
src/feedback.scss (+57/-45)
test/index.html (+42/-37)
To merge this branch: bzr merge lp:~jonas-drange/ulysses/inline-form-feedback
Reviewer Review Type Date Requested Status
Stephen Stewart (community) 2013-12-05 Approve on 2013-12-12
Review via email: mp+197911@code.launchpad.net

Commit message

Tweaking background colors of message blocks to work with the default colors and dding form messages and form-control-error

Description of the change

Tweaking background colors of message blocks to work with the default colors from http://design.ubuntu.com/web/colour
Adding form messages and form-control-error

To post a comment you must log in.
Stephen Stewart (stephen-stewart) wrote :

Move the fallback-colors options to .csslintrc, that should be a general option.
Always preface numbers like .55 with a zero, that's my old physics teacher speaking ;)

I *think* we should have ues-message-error, ues-message-warning, that's how i've been trying to do it. It's a little more verbose but it is also more expressive and understandable (in that, we all understand the pattern?), but it's up for discussion. eg.

<div class="ues-message ues-message-inline ues-message-warning">

In the form I would be choosing a name like ues-message-flow, to keep it part of this module namespace. So you have 3 message formats, -inline (inline-block) -flow (flow content) and the default ues-message (block). Form module by itself would simply have inline text, adding in the message/feedback module brings you this well defined visual language of message boxes.

review: Needs Fixing
Stephen Stewart (stephen-stewart) wrote :

^^^

<div class="ues-message ues-message-inline ues-message-warning">

"it is a user message"
"it is modified to be of the form 'inline message'"
"it is modified to be a warning"

review: Approve
Ubuntu One Auto Pilot (otto-pilot) wrote :

Attempt to merge into lp:ulysses failed due to conflicts:

text conflict in .csslintrc
text conflict in src/feedback.css
text conflict in test/index.html

Unmerged revisions

12. By Jonas G. Drange on 2013-12-05

address namespace issues and move fallback-colors inot csslintc

11. By Jonas G. Drange on 2013-12-05

reverting to standard colors, tweaking background to work with them. adding form-control-error and form-message

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file '.csslintrc'
2--- .csslintrc 2013-11-27 22:54:56 +0000
3+++ .csslintrc 2013-12-05 17:35:47 +0000
4@@ -4,5 +4,6 @@
5 "universal-selector": false,
6 "box-sizing": false,
7 "unique-headings": false,
8- "qualified-headings": false
9+ "qualified-headings": false,
10+ "fallback-colors": false
11 }
12
13=== modified file 'src/feedback.scss'
14--- src/feedback.scss 2013-12-01 00:08:37 +0000
15+++ src/feedback.scss 2013-12-05 17:35:47 +0000
16@@ -1,33 +1,29 @@
17 .ues-message {
18+ color: #555;
19 padding: 0.5em 0.6em;
20 border-radius: 2px;
21-
22+ border-color: #AEA79F;
23 background-color: #E6E4E2;
24- border-color: #AEA79F;
25- color: #555;
26-}
27-/*csslint fallback-colors: false*/
28+ border-width: 1px;
29+ border-style: solid;
30+ box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
31+}
32+.ues-message-inline {
33+ display: inline-block;
34+}
35 .ues-message a:link {
36 color: inherit;
37- color: rgba(0,0,0,0.75);
38 text-decoration: underline;
39 }
40 .ues-message a:hover {
41 color: #000;
42-}
43-.ues-message-inline {
44- display: inline-block;
45-}
46-.ues-message-bordered {
47- border-width: 1px;
48- border-style: solid;
49- box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
50+ color: rgba(0,0,0,0.55);
51 }
52 .ues-message-stack li {
53 border-radius: 0;
54 border-top-width: 0;
55 border-bottom-color: #000;
56- border-bottom-color: rgba(0,0,0,0.25);
57+ border-bottom-color: rgba(0,0,0,0.15);
58 }
59 .ues-message-stack :first-child {
60 border-radius: 2px 2px 0 0;
61@@ -66,59 +62,75 @@
62 opacity: 0
63 }
64
65-.ues-disabled {
66+.ues-message-disabled {
67 color: #999;
68 border-color: #ccc;
69+ background-color: #fafafa;
70 }
71
72-.ues-success {
73- background-color: #AFE1B6;
74+.ues-message-success {
75+ background-color: #E6FFE9;
76 border-color: #38B44A;
77- color: #114918;
78+ color: #38B44A;
79 }
80-.ues-warning {
81- background-color: #F8E2B1;
82+.ues-message-warning {
83+ background-color: #FFFCF4;
84 border-color: #EFB73E;
85- color: #68563F;
86+ color: #ECA918;
87 }
88-.ues-error {
89- background-color: #F5C2BF;
90+.ues-message-error {
91+ background-color: #FFE2E0;
92 border-color: #DF382C;
93- color: #A11E1A;
94-}
95-@keyframes ues-error-pulsating {
96- from { background: #FFE6E5; }
97- to { background: #FFA09B; }
98-}
99-@-moz-keyframes ues-error-pulsating {
100- from { background: #FFE6E5; }
101- to { background: #FFA09B; }
102-}
103-@-webkit-keyframes ues-error-pulsating {
104- from { background: #FFE6E5; }
105- to { background: #FFA09B; }
106-}
107-.ues-error-pulsating {
108+ color: #DF382C;
109+}
110+@keyframes ues-message-error-pulsating {
111+ from { background: #FFF4F4; }
112+ to { background: #FFE2E0; }
113+}
114+@-moz-keyframes ues-message-error-pulsating {
115+ from { background: #FFF4F4; }
116+ to { background: #FFE2E0; }
117+}
118+@-webkit-keyframes ues-message-error-pulsating {
119+ from { background: #FFF4F4; }
120+ to { background: #FFE2E0; }
121+}
122+.ues-message-error-pulsating {
123 animation-duration: 0.7s;
124- animation-name: ues-error-pulsating;
125+ animation-name: ues-message-error-pulsating;
126 animation-direction: alternate;
127 animation-iteration-count: infinite;
128 animation-timing-function: ease-in-out;
129
130 -webkit-animation-duration: 0.7s;
131- -webkit-animation-name: ues-error-pulsating;
132+ -webkit-animation-name: ues-message-error-pulsating;
133 -webkit-animation-direction: alternate;
134 -webkit-animation-iteration-count: infinite;
135 -webkit-animation-timing-function: ease-in-out;
136
137 -moz-animation-duration: 0.7s;
138- -moz-animation-name: ues-error-pulsating;
139+ -moz-animation-name: ues-message-error-pulsating;
140 -moz-animation-direction: alternate;
141 -moz-animation-iteration-count: infinite;
142 -moz-animation-timing-function: ease-in-out;
143 }
144-.ues-information {
145- background-color: #B9E9FA;
146+.ues-message-information {
147+ background-color: #EFFBFF;
148 border-color: #19B6EE;
149- color: #40525C;
150+ color: #19B6EE;
151+}
152+.ues-message-flow {
153+ background: transparent;
154+ border: none;
155+ box-shadow: none;
156+ padding: 0;
157+}
158+input.ues-control-error,
159+select.ues-control-error,
160+textarea.ues-control-error,
161+input.ues-control-error:focus,
162+select.ues-control-error:focus,
163+textarea.ues-control-error:focus {
164+ border-color: #DF382C;
165+ color: #DF382C;
166 }
167
168=== modified file 'test/index.html'
169--- test/index.html 2013-12-01 00:10:47 +0000
170+++ test/index.html 2013-12-05 17:35:47 +0000
171@@ -333,6 +333,20 @@
172 </form>
173 </div>
174
175+ <p>Form feedback</p>
176+
177+ <div class="ues-box example" title="Default Form">
178+ <form action>
179+ <fieldset>
180+ <label>Username:</label>
181+ <input class=ues-control-error type=text value=lola-chang>
182+ <div><p class="ues-message ues-message-flow ues-message-success">Success message</p></div>
183+ <div><p class="ues-message ues-message-flow ues-message-error">Error message</p></div>
184+ </fieldset>
185+ </form>
186+ </div>
187+
188+
189 <div class="ues-box example">
190 <fieldset>
191 <legend>Payment Details</legend>
192@@ -485,7 +499,7 @@
193
194 </div>
195
196- <div class="section" id="feedback" style="margin-bottom: 2em">
197+ <div class="section" id="feedback">
198 <h1>Feedback</h1>
199
200
201@@ -493,42 +507,33 @@
202
203 <p>Main styles are <code>message</code> (base style), <code>disabled</code>, <code>success</code>, <code>warning</code>, <code>error</code> and <code>information</code>.</p>
204
205- <div class="doc-example">
206-
207- <p class="ues-message ues-message-inline">Message</p>
208-
209- <p class="ues-message ues-message-inline ues-disabled">Disabled</p>
210-
211- <p class="ues-message ues-message-inline ues-success">Success</p>
212-
213- <p class="ues-message ues-message-inline ues-warning">Warning</p>
214-
215- <p class="ues-message ues-message-inline ues-error">Error</p>
216-
217- <p class="ues-message ues-message-inline ues-information">Information</p>
218-
219- <p class="ues-message ues-message-bordered">Block element with border</p>
220-
221- <p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
222-
223- <p class="ues-message ues-message-bordered ues-information ues-message-closeable">Closable</p>
224-
225- <p class="ues-message ues-message-bordered ues-error ues-error-pulsating">Pulsating error</p>
226-
227- </div>
228-
229- <p style="margin-top: 2em">Stacked messages:</p>
230-
231- <div class="doc-example">
232-
233- <ul class="ues-message-stack">
234- <li class="ues-message ues-message-bordered ues-success">Collect $2000</li>
235- <li class="ues-message ues-message-bordered ues-information">It's looking up</li>
236- <li class="ues-message ues-message-bordered ues-warning">Go directly to jail</li>
237- <li class="ues-message ues-message-bordered ues-error">Your hotels are on fire</li>
238- </ul>
239-
240- </div>
241+ <p class="ues-message">Message</p>
242+
243+ <p class="ues-message ues-message-disabled">Disabled</p>
244+
245+ <p class="ues-message ues-message-success">Success</p>
246+
247+ <p class="ues-message ues-message-warning">Warning with <a href="#feedback">important link</a></p>
248+
249+ <p class="ues-message ues-message-information ues-message-closeable">Information, closable</p>
250+
251+ <p class="ues-message ues-message-error">Error</p>
252+
253+ <p class="ues-message ues-message-error ues-message-error-pulsating">Pulsating error</p>
254+
255+ <p>Flow messages:</p>
256+
257+ <p>An <span class="ues-message ues-message-flow ues-message-error">error</span> which flows.</p>
258+
259+ <p>Stacked messages:</p>
260+
261+ <ul class="ues-message-stack">
262+ <li class="ues-message ues-message-success">Stacked success message</li>
263+ <li class="ues-message ues-message-information">Stacked information message</li>
264+ <li class="ues-message ues-message-warning">Stacked warning message</li>
265+ <li class="ues-message ues-message-error">Stacked error message</li>
266+ </ul>
267+
268 </div>
269
270

Subscribers

People subscribed via source and target branches