You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by st...@apache.org on 2016/09/08 21:53:34 UTC

cordova-plugin-dialogs git commit: Separated CSS from JS code. Fixed the prompt dialog CSS to look close to native. Fixed the positioning of the prompt dialog for Windows. Fixed minor JSHint issues.

Repository: cordova-plugin-dialogs
Updated Branches:
  refs/heads/master fc5dfdb9d -> c1fc59cbf


Separated CSS from JS code.
Fixed the prompt dialog CSS to look close to native.
Fixed the positioning of the prompt dialog for Windows.
Fixed minor JSHint issues.

 This closes #74


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/c1fc59cb
Tree: http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/tree/c1fc59cb
Diff: http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/diff/c1fc59cb

Branch: refs/heads/master
Commit: c1fc59cbf6431871a7d9de4c053a4b6712096d21
Parents: fc5dfdb
Author: Serban Ghita <sg...@adobe.com>
Authored: Wed May 4 16:34:45 2016 +0300
Committer: Steve Gill <st...@gmail.com>
Committed: Thu Sep 8 14:53:29 2016 -0700

----------------------------------------------------------------------
 plugin.xml                       | 22 ++++++------
 src/windows/NotificationProxy.js | 66 +++++++++++++++++++----------------
 www/windows/notification.css     | 63 +++++++++++++++++++++++++++++++++
 3 files changed, 110 insertions(+), 41 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/blob/c1fc59cb/plugin.xml
----------------------------------------------------------------------
diff --git a/plugin.xml b/plugin.xml
index fffc4ec..9450b5c 100644
--- a/plugin.xml
+++ b/plugin.xml
@@ -41,13 +41,13 @@
             </feature>
         </config-file>                                         
         
-		<asset src="www/firefoxos/notification.css" target="css/notification.css" />
-		<asset src="www/firefoxos/danger-press.png" target="img/danger-press.png" />
-		<asset src="www/firefoxos/danger.png" target="img/danger.png" />
-		<asset src="www/firefoxos/default.png" target="img/default.png" />
-		<asset src="www/firefoxos/gradient.png" target="img/gradient.png" />
-		<asset src="www/firefoxos/pattern.png" target="img/pattern.png" />
-		<asset src="www/firefoxos/recommend.png" target="img/recommend.png" />
+        <asset src="www/firefoxos/notification.css" target="css/notification.css" />
+        <asset src="www/firefoxos/danger-press.png" target="img/danger-press.png" />
+        <asset src="www/firefoxos/danger.png" target="img/danger.png" />
+        <asset src="www/firefoxos/default.png" target="img/default.png" />
+        <asset src="www/firefoxos/gradient.png" target="img/gradient.png" />
+        <asset src="www/firefoxos/pattern.png" target="img/pattern.png" />
+        <asset src="www/firefoxos/recommend.png" target="img/recommend.png" />
         <js-module src="src/firefoxos/notification.js" name="dialogs-impl">
           <runs />
         </js-module>
@@ -110,9 +110,9 @@
             </feature>
         </config-file>
         <header-file src="src/ios/CDVNotification.h" />
-	    <source-file src="src/ios/CDVNotification.m" />
-	    <resource-file src="src/ios/CDVNotification.bundle" />
-		<framework src="AudioToolbox.framework" weak="true" />
+        <source-file src="src/ios/CDVNotification.m" />
+        <resource-file src="src/ios/CDVNotification.bundle" />
+        <framework src="AudioToolbox.framework" weak="true" />
     </platform>
 
     <!-- blackberry10 -->
@@ -167,5 +167,7 @@
         <js-module src="src/windows/NotificationProxy.js" name="NotificationProxy">
             <merges target="" />
         </js-module>
+
+        <asset src="www/windows/notification.css" target="css/notification.css" />
     </platform>
 </plugin>

http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/blob/c1fc59cb/src/windows/NotificationProxy.js
----------------------------------------------------------------------
diff --git a/src/windows/NotificationProxy.js b/src/windows/NotificationProxy.js
index c9c9233..cacdb1f 100644
--- a/src/windows/NotificationProxy.js
+++ b/src/windows/NotificationProxy.js
@@ -17,15 +17,34 @@
  * specific language governing permissions and limitations
  * under the License.
  *
-*/
+ */
 
 /*global Windows:true, WinJS, toStaticHTML */
 
 var cordova = require('cordova');
+var urlutil = require('cordova/urlutil');
 
 var isAlertShowing = false;
 var alertStack = [];
 
+function createCSSElem(fileName) {
+    var elemId = fileName.substr(0, fileName.lastIndexOf(".")) + "-plugin-style";
+    // If the CSS element exists, don't recreate it.
+    if (document.getElementById(elemId)) {
+        return false;
+    }
+
+    // Create CSS and append it to DOM.
+    var $elem = document.createElement('link');
+    $elem.id = elemId;
+    $elem.rel = "stylesheet";
+    $elem.type = "text/css";
+    $elem.href = urlutil.makeAbsolute("/www/css/" + fileName);
+
+    document.head.appendChild($elem);
+    return true;
+}
+
 // CB-8928: When toStaticHTML is undefined, prompt fails to run
 var _cleanHtml = function(html) { return html; };
 if (typeof toStaticHTML !== 'undefined') {
@@ -36,37 +55,28 @@ if (typeof toStaticHTML !== 'undefined') {
 // simple html-based implementation until it is available
 function createPromptDialog(title, message, buttons, defaultText, callback) {
 
-    var isPhone = cordova.platformId == "windows" && WinJS.Utilities.isPhone;
+    var isPhone = cordova.platformId === "windows" && WinJS.Utilities.isPhone;
+    var isWindows = !!cordova.platformId.match(/windows/);
+
+    createCSSElem("notification.css");
 
     var dlgWrap = document.createElement("div");
-    dlgWrap.style.position = "absolute";
-    dlgWrap.style.width = "100%";
-    dlgWrap.style.height = "100%";
-    dlgWrap.style.backgroundColor = "rgba(0,0,0,0.25)";
-    dlgWrap.style.zIndex = "100000";
     dlgWrap.className = "dlgWrap";
 
     var dlg = document.createElement("div");
-    dlg.style.width = "100%";
-    dlg.style.minHeight = "180px";
-    dlg.style.height = "auto";
-    dlg.style.overflow = "auto";
-    dlg.style.backgroundColor = "white";
-    dlg.style.position = "relative";
-    dlg.style.lineHeight = "2";
-
-    if (isPhone) {
-        dlg.style.padding = "0px 5%";
-    } else {
-        dlg.style.top = "50%"; // center vertically
-        dlg.style.transform = "translateY(-50%)";
-        dlg.style.padding = "0px 30%";
+    dlg.className = "dlgContainer";
+
+    if (isWindows) {
+        dlg.className += " dlgContainer-windows";
+    } else if (isPhone) {
+        dlg.className += " dlgContainer-phone";
     }
 
+
     // dialog layout template
-    dlg.innerHTML = _cleanHtml("<span id='lbl-title' style='font-size: 24pt'></span><br/>" + // title
+    dlg.innerHTML = _cleanHtml("<span id='lbl-title'></span><br/>" + // title
         "<span id='lbl-message'></span><br/>" + // message
-        "<input id='prompt-input' style='width: 100%'/><br/>"); // input fields
+        "<input id='prompt-input'/><br/>"); // input fields
 
     dlg.querySelector('#lbl-title').appendChild(document.createTextNode(title));
     dlg.querySelector('#lbl-message').appendChild(document.createTextNode(message));
@@ -85,18 +95,12 @@ function createPromptDialog(title, message, buttons, defaultText, callback) {
 
     function addButton(idx, label) {
         var button = document.createElement('button');
-        button.style.margin = "8px 0 8px 16px";
-        button.style.float = "right";
-        button.style.fontSize = "12pt";
+        button.className = "dlgButton";
         button.tabIndex = idx;
         button.onclick = makeButtonCallback(idx + 1);
         if (idx === 0) {
-            button.style.color = "white";
-            button.style.backgroundColor = "#464646";
-        } else {
-            button.style.backgroundColor = "#cccccc";
+            button.className += " dlgButtonFirst";
         }
-        button.style.border = "none";
         button.appendChild(document.createTextNode(label));
         dlg.appendChild(button);
     }

http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs/blob/c1fc59cb/www/windows/notification.css
----------------------------------------------------------------------
diff --git a/www/windows/notification.css b/www/windows/notification.css
new file mode 100644
index 0000000..cb4fb2d
--- /dev/null
+++ b/www/windows/notification.css
@@ -0,0 +1,63 @@
+.dlgWrap {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.25);
+    z-index: 100000;
+    top: 0;
+}
+
+.dlgContainer {
+    width: 100%;
+    min-height: 180px;
+    height: auto;
+    overflow: auto;
+    background-color: white;
+    position: relative;
+    line-height: 2;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0 30%;
+}
+
+.dlgContainer #lbl-title {
+    font-size: 24pt;
+}
+
+.dlgContainer #prompt-input {
+    width: 100%;
+}
+
+.dlgButton {
+    margin: 8px 0 0 16px;
+    float: right;
+    font-size: 11pt;
+    background-color: #cccccc;
+    border: none;
+    font-weight: 600;
+    font-family: "Segoe UI", Arial, sans-serif;
+    padding: 0 22px;
+}
+
+.dlgButton.dlgButtonFirst {
+    color: white;
+    background-color: #464646;
+}
+
+.dlgContainer.dlgContainer-windows {
+    width: 50%;
+    max-width: 680px;
+    padding: 0 5%;
+    top: 50%;
+    left: 50%;
+    position: fixed;
+    transform: translate(-50%, -50%);
+    border: 1px solid rgb(24, 160, 191);
+    border-image: none;
+    box-shadow: 0 0 14px 6px rgba(0,0,0,0.16);
+    text-transform: none;
+}
+
+.dlgContainer.dlgContainer-phone {
+    padding: 0 5%;
+}
\ No newline at end of file


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org