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

[Jonas G. Drange]

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

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

[Stephen Stewart (stephen-stewart)]

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)]

^^^

<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"

[Stephen Stewart (stephen-stewart)]

review: Approve

[Ubuntu One Auto Pilot (otto-pilot)]

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

=== modified file '.csslintrc'
--- .csslintrc	2013-11-27 22:54:56 +0000
+++ .csslintrc	2013-12-05 17:35:47 +0000
@@ -4,5 +4,6 @@
     "universal-selector": false,
     "box-sizing": false,
     "unique-headings": false,
-    "qualified-headings": false
+    "qualified-headings": false,
+    "fallback-colors": false
 }

=== modified file 'src/feedback.scss'
--- src/feedback.scss	2013-12-01 00:08:37 +0000
+++ src/feedback.scss	2013-12-05 17:35:47 +0000
@@ -1,33 +1,29 @@
 .ues-message {
+    color: #555;
     padding: 0.5em 0.6em;
     border-radius: 2px;
-
+    border-color: #AEA79F;
     background-color: #E6E4E2;
-    border-color: #AEA79F;
-    color: #555;
-}
-/*csslint fallback-colors: false*/
+    border-width: 1px;
+    border-style: solid;
+    box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
+}
+.ues-message-inline {
+    display: inline-block;
+}
 .ues-message a:link {
     color: inherit;
-    color: rgba(0,0,0,0.75);
     text-decoration: underline;
 }
 .ues-message a:hover {
     color: #000;
-}
-.ues-message-inline {
-    display: inline-block;
-}
-.ues-message-bordered {
-    border-width: 1px;
-    border-style: solid;
-    box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
+    color: rgba(0,0,0,0.55);
 }
 .ues-message-stack li {
     border-radius: 0;
     border-top-width: 0;
     border-bottom-color: #000;
-    border-bottom-color: rgba(0,0,0,0.25);
+    border-bottom-color: rgba(0,0,0,0.15);
 }
 .ues-message-stack :first-child {
     border-radius: 2px 2px 0 0;
@@ -66,59 +62,75 @@
     opacity: 0
 }
 
-.ues-disabled {
+.ues-message-disabled {
     color: #999;
     border-color: #ccc;
+    background-color: #fafafa;
 }
 
-.ues-success {
-    background-color: #AFE1B6;
+.ues-message-success {
+    background-color: #E6FFE9;
     border-color: #38B44A;
-    color: #114918;
+    color: #38B44A;
 }
-.ues-warning {
-    background-color: #F8E2B1;
+.ues-message-warning {
+    background-color: #FFFCF4;
     border-color: #EFB73E;
-    color: #68563F;
+    color: #ECA918;
 }
-.ues-error {
-    background-color: #F5C2BF;
+.ues-message-error {
+    background-color: #FFE2E0;
     border-color: #DF382C;
-    color: #A11E1A;
-}
-@keyframes ues-error-pulsating {
-    from { background: #FFE6E5; }
-    to { background: #FFA09B; }
-}
-@-moz-keyframes ues-error-pulsating {
-    from { background: #FFE6E5; }
-    to { background: #FFA09B; }
-}
-@-webkit-keyframes ues-error-pulsating {
-    from { background: #FFE6E5; }
-    to { background: #FFA09B; }
-}
-.ues-error-pulsating {
+    color: #DF382C;
+}
+@keyframes ues-message-error-pulsating {
+    from { background: #FFF4F4; }
+    to { background: #FFE2E0; }
+}
+@-moz-keyframes ues-message-error-pulsating {
+    from { background: #FFF4F4; }
+    to { background: #FFE2E0; }
+}
+@-webkit-keyframes ues-message-error-pulsating {
+    from { background: #FFF4F4; }
+    to { background: #FFE2E0; }
+}
+.ues-message-error-pulsating {
     animation-duration: 0.7s;
-    animation-name: ues-error-pulsating;
+    animation-name: ues-message-error-pulsating;
     animation-direction: alternate;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 
     -webkit-animation-duration: 0.7s;
-    -webkit-animation-name: ues-error-pulsating;
+    -webkit-animation-name: ues-message-error-pulsating;
     -webkit-animation-direction: alternate;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: ease-in-out;
 
     -moz-animation-duration: 0.7s;
-    -moz-animation-name: ues-error-pulsating;
+    -moz-animation-name: ues-message-error-pulsating;
     -moz-animation-direction: alternate;
     -moz-animation-iteration-count: infinite;
     -moz-animation-timing-function: ease-in-out;
 }
-.ues-information {
-    background-color: #B9E9FA;
+.ues-message-information {
+    background-color: #EFFBFF;
     border-color: #19B6EE;
-    color: #40525C;
+    color: #19B6EE;
+}
+.ues-message-flow {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+}
+input.ues-control-error,
+select.ues-control-error,
+textarea.ues-control-error,
+input.ues-control-error:focus,
+select.ues-control-error:focus,
+textarea.ues-control-error:focus {
+    border-color: #DF382C;
+    color: #DF382C;
 }

=== modified file 'test/index.html'
--- test/index.html	2013-12-01 00:10:47 +0000
+++ test/index.html	2013-12-05 17:35:47 +0000
@@ -333,6 +333,20 @@
         </form>
       </div>
 
+      <p>Form feedback</p>
+
+      <div class="ues-box example" title="Default Form">
+        <form action>
+          <fieldset>
+            <label>Username:</label>
+            <input class=ues-control-error type=text value=lola-chang>
+            <div><p class="ues-message ues-message-flow ues-message-success">Success message</p></div>
+            <div><p class="ues-message ues-message-flow ues-message-error">Error message</p></div>
+          </fieldset>
+        </form>
+      </div>
+
+
       <div class="ues-box example">
         <fieldset>
           <legend>Payment Details</legend>
@@ -485,7 +499,7 @@
 
   </div>
 
-  <div class="section" id="feedback" style="margin-bottom: 2em">
+  <div class="section" id="feedback">
     <h1>Feedback</h1>
 
 
@@ -493,42 +507,33 @@
 
     <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>
 
-    <div class="doc-example">
-
-      <p class="ues-message ues-message-inline">Message</p>
-
-      <p class="ues-message ues-message-inline ues-disabled">Disabled</p>
-
-      <p class="ues-message ues-message-inline ues-success">Success</p>
-
-      <p class="ues-message ues-message-inline ues-warning">Warning</p>
-
-      <p class="ues-message ues-message-inline ues-error">Error</p>
-
-      <p class="ues-message ues-message-inline ues-information">Information</p>
-
-      <p class="ues-message ues-message-bordered">Block element with border</p>
-
-      <p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
-
-      <p class="ues-message ues-message-bordered ues-information ues-message-closeable">Closable</p>
-
-      <p class="ues-message ues-message-bordered ues-error ues-error-pulsating">Pulsating error</p>
-
-    </div>
-
-    <p style="margin-top: 2em">Stacked messages:</p>
-
-    <div class="doc-example">
-
-      <ul class="ues-message-stack">
-        <li class="ues-message ues-message-bordered ues-success">Collect $2000</li>
-        <li class="ues-message ues-message-bordered ues-information">It's looking up</li>
-        <li class="ues-message ues-message-bordered ues-warning">Go directly to jail</li>
-        <li class="ues-message ues-message-bordered ues-error">Your hotels are on fire</li>
-      </ul>
-
-    </div>
+    <p class="ues-message">Message</p>
+
+    <p class="ues-message ues-message-disabled">Disabled</p>
+
+    <p class="ues-message ues-message-success">Success</p>
+
+    <p class="ues-message ues-message-warning">Warning with <a href="#feedback">important link</a></p>
+
+    <p class="ues-message ues-message-information ues-message-closeable">Information, closable</p>
+
+    <p class="ues-message ues-message-error">Error</p>
+
+    <p class="ues-message ues-message-error ues-message-error-pulsating">Pulsating error</p>
+
+    <p>Flow messages:</p>
+
+    <p>An <span class="ues-message ues-message-flow ues-message-error">error</span> which flows.</p>
+
+    <p>Stacked messages:</p>
+
+    <ul class="ues-message-stack">
+      <li class="ues-message ues-message-success">Stacked success message</li>
+      <li class="ues-message ues-message-information">Stacked information message</li>
+      <li class="ues-message ues-message-warning">Stacked warning message</li>
+      <li class="ues-message ues-message-error">Stacked error message</li>
+    </ul>
+
 </div>