cordova-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ste...@apache.org
Subject [06/12] git commit: style added
Date Fri, 25 Oct 2013 21:33:54 GMT
style added


Project: http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/commit/8f337f09
Tree: http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/tree/8f337f09
Diff: http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/diff/8f337f09

Branch: refs/heads/dev
Commit: 8f337f09b99419fac8c54302eaee2e9fcc3d6d11
Parents: 81ee294
Author: Piotr Zalewa <piotr@zalewa.info>
Authored: Tue Oct 22 16:11:55 2013 +0200
Committer: Piotr Zalewa <piotr@zalewa.info>
Committed: Tue Oct 22 16:11:55 2013 +0200

----------------------------------------------------------------------
 src/firefoxos/notification.js  |  47 +++++---
 www/firefoxos/notification.css | 216 ++++++++++++++++++++++++++++++++++--
 2 files changed, 240 insertions(+), 23 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/blob/8f337f09/src/firefoxos/notification.js
----------------------------------------------------------------------
diff --git a/src/firefoxos/notification.js b/src/firefoxos/notification.js
index bba2d66..cde4eae 100644
--- a/src/firefoxos/notification.js
+++ b/src/firefoxos/notification.js
@@ -4,38 +4,57 @@ var firefoxos = require('cordova/platform');
 function _empty() {}
 
 function modal(message, callback, title, buttonLabels, domObjects) {
+    /*
+      <form role="dialog">
+          <section>
+              <h1>Some Title</h1>
+              <p>Can't find a proper question for that ...</p>
+          </section>
+          <menu>
+              <button>Cancel</button>
+              <button class="danger">Delete</button>
+              <button class="recommend">Recommend</button>
+              <button>Standard</button>
+          </menu>
+      </form>
+     */
     // create a modal window
-    var box = document.createElement('div');
-    box.classList.add('fxos-modal-window');
+    var box = document.createElement('form');
+    box.setAttribute('role', 'dialog');
+    // prepare and append empty section
+    var section = document.createElement('section');
+    box.appendChild(section);
     // add title
-    if (title) {
-        var boxtitle = document.createElement('h3');
-        boxtitle.appendChild(document.createTextNode(title));
-        box.appendChild(boxtitle);
-    }
+    var boxtitle = document.createElement('h1');
+    boxtitle.appendChild(document.createTextNode(title));
+    section.appendChild(boxtitle);
     // add message
     var boxMessage = document.createElement('p');
     boxMessage.appendChild(document.createTextNode(message));
-    box.appendChild(boxMessage);
+    section.appendChild(boxMessage);
     // inject what's needed
     if (domObjects) {
-        box.appendChild(domObjects);
+        section.appendChild(domObjects);
     }
     // add buttons and assign callbackButton on click
+    var menu = document.createElement('menu');
+    box.appendChild(menu);
     for (var index = 0; index < buttonLabels.length; index++) {
-        // TODO: first button is the default one (listens to Enter
-        // key)
         // TODO: last button listens to the cancel key
-        addButton(buttonLabels[index], index);
+        addButton(buttonLabels[index], index, (index === 0));
     }
     document.body.appendChild(box);
 
-    function addButton(label, index) {
+    function addButton(label, index, recommended) {
         var button = document.createElement('button');
         button.appendChild(document.createTextNode(label));
         button.labelIndex = index;
         button.addEventListener('click', callbackButton, false);
-        box.appendChild(button);
+        if (recommended) {
+          // TODO: default one listens to Enter key
+          button.classList.add('recommend');
+        }
+        menu.appendChild(button);
     }
 
     // call callback and destroy modal

http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/blob/8f337f09/www/firefoxos/notification.css
----------------------------------------------------------------------
diff --git a/www/firefoxos/notification.css b/www/firefoxos/notification.css
index d645d9f..1ad5036 100644
--- a/www/firefoxos/notification.css
+++ b/www/firefoxos/notification.css
@@ -1,10 +1,208 @@
-.fxos-modal-window {
-    background-color: rgba(0, 0, 0, .5);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    text-align: center;
-    padding-top: 3em;
+/* ----------------------------------
+ * Confirm
+ * ---------------------------------- */
+
+/* Main dialog setup */
+form[role="dialog"] {
+  background:
+    url(https://raw.github.com/arcturus/firefox-os-notifications/master/style/confirm/images/ui/pattern.png)
repeat left top,
+    url(https://raw.github.com/arcturus/firefox-os-notifications/master/style/confirm/images/ui/gradient.png)
no-repeat left top / 100% 100%;
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 1.5rem 0 7rem;
+  font-family: "MozTT", Sans-serif;
+  font-size: 0;
+  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+  created by white-spaces and break lines in the code betewen inline-block elements */
+  color: #fff;
+  text-align: left;
 }
+
+form[role="dialog"]:before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 0.1rem;
+  height: 100%;
+  margin-left: -0.1rem;
+}
+
+form[role="dialog"] > section {
+  font-weight: lighter;
+  font-size: 2.2rem;
+  color: #FAFAFA;
+  padding: 0 1.5rem;
+  -moz-box-sizing: padding-box;
+  width: 100%;
+  display: inline-block;
+  overflow-y: scroll;
+  max-height: 100%;
+  vertical-align: middle;
+  white-space: normal;
+}
+
+form[role="dialog"] h1 {
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 1.5em;
+  color: #fff;
+  margin: 0;
+  padding: 0 1.5rem 1rem;
+  border-bottom: 0.1rem solid #686868;
+}
+
+/* Menu & buttons setup */
+form[role="dialog"] menu {
+  margin: 0;
+  padding: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-top: solid 0.1rem rgba(255, 255, 255, 0.1);
+  background: #2d2d2d url(https://raw.github.com/arcturus/firefox-os-notifications/master/style/confirm/images/ui/pattern.png)
repeat left top;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+}
+
+form[role="dialog"] menu button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+form[role="dialog"] menu button {
+  width: 100%;
+  height: 3.8rem;
+  margin: 0 0 1rem;
+  padding: 0 1.5rem;
+  -moz-box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #fafafa url(https://raw.github.com/arcturus/firefox-os-notifications/master/style/confirm/images/ui/default.png)
repeat-x left bottom/ auto 100%;
+  border: 0.1rem solid #a6a6a6;
+  border-radius: 0.3rem;
+  font: 500 1.6rem/3.8rem 'MozTT', Sans-serif;
+  color: #333;
+  text-align: center;
+  text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
+  text-decoration: none;
+  outline: none;
+}
+
+/* Press (default & recommend) */
+form[role="dialog"] menu button:active,
+form[role="dialog"] menu button.recommend:active,
+a.recommend[role="button"]:active  {
+  border-color: #008aaa;
+  color: #333;
+}
+
+/* Recommend */
+form[role="dialog"] menu button.recommend {
+  background-image: url(https://raw.github.com/arcturus/firefox-os-notifications/master/style/confirm/images/ui/recommend.png);
+  background-color: #00caf2;
+  border-color: #008eab;
+}
+
+/* Danger */
+form[role="dialog"] menu button.danger,
+a.danger[role="button"] {
+  background-image: url(https://raw.github.com/arcturus/firefox-os-notifications/master/style/confirm/images/ui/danger.png);
+  background-color: #b70404;
+  color: #fff;
+  text-shadow: none;
+  border-color: #820000;
+}
+
+/* Danger Press */
+form[role="dialog"] menu button.danger:active {
+  background-image: url(https://raw.github.com/arcturus/firefox-os-notifications/master/style/confirm/images/ui/danger-press.png);
+  background-color: #890707;
+}
+
+/* Disabled */
+form[role="dialog"] > menu > button[disabled] {
+  background: #5f5f5f;
+  color: #4d4d4d;
+  text-shadow: none;
+  border-color: #4d4d4d;
+  pointer-events: none;
+}
+
+
+form[role="dialog"] menu button:nth-child(even) {
+  margin-left: 1rem;
+}
+
+form[role="dialog"] menu button,
+form[role="dialog"] menu button:nth-child(odd) {
+  margin: 0 0 1rem 0;
+}
+
+form[role="dialog"] menu button {
+  width: calc((100% - 1rem) / 2);
+}
+
+form[role="dialog"] menu button.full {
+  width: 100%;
+}
+
+/* Specific component code */
+form[role="dialog"] p {
+  word-wrap: break-word;
+  margin: 1rem 0 0;
+  padding: 0 1.5rem 1rem;
+  line-height: 3rem;
+}
+
+form[role="dialog"] p img {
+  float: left;
+  margin-right: 2rem;
+}
+
+form[role="dialog"] p strong {
+  font-weight: lighter;
+}
+
+form[role="dialog"] p small {
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: #cbcbcb;
+  display: block;
+}
+
+form[role="dialog"] dl {
+  border-top: 0.1rem solid #686868;
+  margin: 1rem 0 0;
+  overflow: hidden;
+  padding-top: 1rem;
+  font-size: 1.6rem;
+  line-height: 2.2rem;
+}
+
+form[role="dialog"] dl > dt {
+  clear: both;
+  float: left;
+  width: 7rem;
+  padding-left: 1.5rem;
+  font-weight: 500;
+  text-align: left;
+}
+
+form[role="dialog"] dl > dd {
+  padding-right: 1.5rem;
+  font-weight: 300;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  overflow: hidden;
+}
+


Mime
View raw message