add alertify for prettier dialogs

bower.json

@@ -37,6 +37,7 @@
     "chainpad-listmap": "^0.2.0",
     "lil-uri": "^0.2.1",
     "file-saver": "^1.3.1",
-    "diff-dom": "#gh-pages"
+    "diff-dom": "#gh-pages",
+    "alertifyjs": "^1.0.11"
   }
 }

customize.dist/alertify.css

@@ -0,0 +1,194 @@
+.alertify-logs > * {
+  padding: 12px 24px;
+  color: #fff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 1px;
+}
+.alertify-logs > *,
+.alertify-logs > *.default {
+  background: rgba(0, 0, 0, 0.8);
+}
+.alertify-logs > *.error {
+  background: rgba(244, 67, 54, 0.8);
+}
+.alertify-logs > *.success {
+  background: rgba(76, 175, 80, 0.9);
+}
+.alertify {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.3);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+}
+.alertify.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+.alertify,
+.alertify.show {
+  box-sizing: border-box;
+  transition: all 0.33s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.alertify,
+.alertify * {
+  box-sizing: border-box;
+}
+.alertify .dialog {
+  padding: 12px;
+}
+.alertify .dialog,
+.alertify .alert {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.alertify .dialog > div,
+.alertify .alert > div {
+  background-color: #685d56;
+  border-radius: 5px;
+}
+.alertify .dialog > *,
+.alertify .alert > * {
+  width: 400px;
+  max-width: 95%;
+  margin: 0 auto;
+  text-align: center;
+  padding: 12px;
+  background: #fff;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.098), 0 1px 10px 0 rgba(0, 0, 0, 0.084);
+}
+.alertify .dialog .msg,
+.alertify .alert .msg {
+  padding: 12px;
+  margin-bottom: 12px;
+  margin: 0;
+  text-align: left;
+}
+.alertify .dialog input:not(.form-control),
+.alertify .alert input:not(.form-control) {
+  background-color: #302B28;
+  color: #fafafa;
+  border: 0px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  width: 100%;
+  font-size: 100%;
+  padding: 12px;
+}
+.alertify .dialog input:not(.form-control):focus,
+.alertify .alert input:not(.form-control):focus {
+  outline-offset: -2px;
+}
+.alertify .dialog nav,
+.alertify .alert nav {
+  text-align: right;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button),
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+  background-color: transparent;
+  box-sizing: border-box;
+  color: #fafafa;
+  position: relative;
+  outline: 0;
+  border: 0;
+  display: inline-block;
+  align-items: center;
+  padding: 0 6px;
+  margin: 6px 8px;
+  line-height: 36px;
+  min-height: 36px;
+  white-space: nowrap;
+  min-width: 88px;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 14px;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active {
+  background-color: rgba(0, 100, 0, 0.15);
+}
+.alertify .dialog nav button.btn,
+.alertify .alert nav button.btn {
+  margin: 6px 4px;
+}
+.alertify-logs {
+  position: fixed;
+  z-index: 99999;
+}
+.alertify-logs.bottom,
+.alertify-logs:not(.top) {
+  bottom: 16px;
+}
+.alertify-logs.left,
+.alertify-logs:not(.right) {
+  left: 16px;
+}
+.alertify-logs.left > *,
+.alertify-logs:not(.right) > * {
+  float: left;
+  transform: translate3d(0, 0, 0);
+  height: auto;
+}
+.alertify-logs.left > *.show,
+.alertify-logs:not(.right) > *.show {
+  left: 0;
+}
+.alertify-logs.left > *,
+.alertify-logs:not(.right) > *,
+.alertify-logs.left > *.hide,
+.alertify-logs:not(.right) > *.hide {
+  left: -110%;
+}
+.alertify-logs.right {
+  right: 16px;
+}
+.alertify-logs.right > * {
+  float: right;
+  transform: translate3d(0, 0, 0);
+}
+.alertify-logs.right > *.show {
+  right: 0;
+  opacity: 1;
+}
+.alertify-logs.right > *,
+.alertify-logs.right > *.hide {
+  right: -110%;
+  opacity: 0;
+}
+.alertify-logs.top {
+  top: 0;
+}
+.alertify-logs > * {
+  box-sizing: border-box;
+  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  position: relative;
+  clear: both;
+  backface-visibility: hidden;
+  perspective: 1000;
+  max-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+.alertify-logs > *.show {
+  margin-top: 12px;
+  opacity: 1;
+  max-height: 1000px;
+  padding: 12px;
+  pointer-events: auto;
+}

customize.dist/main.js

@@ -2,7 +2,7 @@ define([
     '/customize/DecorateToolbar.js',
     '/common/cryptpad-common.js',
     '/bower_components/lil-uri/uri.min.js',
-    '/bower_components/jquery/dist/jquery.min.js'
+    '/bower_components/jquery/dist/jquery.min.js',
 ], function (DecorateToolbar, Cryptpad, LilUri) {
     var $ = window.$;
     DecorateToolbar.main($('#bottom-bar'));
@@ -37,7 +37,7 @@ define([
         recentPads.some(function (pad, index) {
             if (!pad) { return; }
 
-            console.log(pad);
+            //console.log(pad);
 
             // don't link to old pads
             if (now.getTime() - new Date(pad.atime).getTime() > memorySpan) { return true; }

customize.dist/src/alertify.less

@@ -0,0 +1,241 @@
+@import "./variables.less";
+
+.alertify-logs {
+    > * {
+        padding: @padding-base @padding-base * 2;
+        color: #fff;
+        box-shadow: @box-shadow;
+        border-radius: @border-radius;
+        &, &.default {
+            // FIXME
+            background: rgba(0, 0, 0, .8);
+        }
+        &.error {
+          background: @danger-color;
+        }
+        &.success {
+          background: @success-color;
+        }
+    }
+}
+
+.alertify {
+
+    position: fixed;
+    background-color: @alertify-bg;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+
+    &.hide {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &, &.show {
+        box-sizing: border-box;
+        transition: all .33s cubic-bezier(.25, .8, .25, 1);
+    }
+
+    &, * {
+        box-sizing: border-box;
+    }
+
+    .dialog {
+       padding: 12px;
+    }
+
+    .dialog, .alert {
+
+        & > div {
+            background-color: @light-base;
+            border-radius: 5px;
+        }
+
+        width: 100%;
+        margin: 0 auto;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+
+        > * {
+            width: 400px;
+            max-width: 95%;
+            margin: 0 auto;
+            text-align: center;
+            padding: @padding-base;
+            background: #fff;
+            // FIXME
+            box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
+        }
+
+        .msg {
+          padding: @padding-base;
+          margin-bottom: @padding-base;
+          margin: 0;
+          text-align: left;
+        }
+
+        input:not(.form-control){
+            background-color: @alertify-input-bg;
+            color: @alertify-input-fg;
+
+            border: 0px;
+            border-radius: 5px;
+
+            margin-bottom: 15px;
+            width: 100%;
+            font-size: 100%;
+            padding: @padding-base;
+            &:focus {
+                outline-offset: -2px;
+            }
+        }
+        nav {
+
+            text-align: right;
+
+            button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+
+                background-color: @alertify-btn-bg;
+                box-sizing: border-box;
+                color: @alertify-btn-fg;
+                position: relative;
+                outline: 0;
+                border: 0;
+                display: inline-block;
+                align-items: center;
+                padding: 0 6px;
+                margin: 6px 8px;
+                line-height: 36px;
+                min-height: 36px;
+                white-space: nowrap;
+                min-width: 88px;
+                text-align: center;
+                text-transform: uppercase;
+                font-size: 14px;
+                text-decoration: none;
+                cursor: pointer;
+                border: 1px solid transparent;
+                border-radius: 2px;
+
+                &:hover, &:active {
+                    background-color: @alertify-btn-bg-hover;
+                }
+
+                &:focus {
+                    // FIXME
+                    //border: 1px solid rgba(0, 0, 0, .1);
+                }
+
+            }
+
+            button.btn {
+                margin: 6px 4px;
+            }
+
+        }
+    }
+}
+
+.alertify-logs {
+
+    position: fixed;
+    z-index: 99999;
+
+    &.bottom, &:not(.top) {
+        bottom: 16px;
+        // Bottom left placement. Default. Use for transitions.
+        &.left, &:not(.right) {
+            > * {
+
+            }
+        }
+        // Top right placement
+        &.right {
+            > * {
+
+            }
+        }
+    }
+
+    // All left positions.
+    &.left, &:not(.right) {
+        left: 16px;
+        > * {
+            float: left;
+            transform: translate3d(0, 0, 0);
+            height: auto;
+
+            &.show {
+                left: 0;
+            }
+            &, &.hide {
+                left: -110%;
+            }
+        }
+    }
+
+    &.right {
+        right: 16px;
+        > * {
+            float: right;
+            transform: translate3d(0, 0, 0);
+            &.show {
+                right: 0;
+                opacity: 1;
+            }
+            &, &.hide {
+                right: -110%;
+                opacity: 0;
+            }
+        }
+    }
+
+    &.top {
+        top: 0;
+        // Top left placement, use for transitions.
+        &.left, &:not(.right) {
+            > * {
+
+            }
+        }
+        // Top right placement, use for transitions
+        &.right {
+            > * {
+
+            }
+        }
+    }
+
+    > * {
+        box-sizing: border-box;
+        transition: all .4s cubic-bezier(.25, .8, .25, 1);
+        position: relative;
+        clear: both;
+        backface-visibility: hidden;
+        perspective: 1000;
+
+        & {
+            max-height: 0;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &.show {
+            margin-top: @padding-base;
+            opacity: 1;
+            max-height: 1000px;
+            padding: @padding-base;
+            pointer-events: auto;
+        }
+    }
+
+}

customize.dist/src/cryptpad.less

@@ -1,12 +1,4 @@
-@base: #302B28;
+@import "./variables.less";
-@light-base: lighten(@base, 20%);
-@fore: #fafafa;
-
-@cp-green: #46E981;
-@cp-accent: lighten(@cp-green, 20%);
-
-@cp-red: #FF0073; // remove red
-@cp-outline: #444;
 
 .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
     @font-face{
@@ -290,3 +282,4 @@ tbody {
     max-width: 100px;
 }
 
+

customize.dist/src/variables.less

@@ -0,0 +1,30 @@
+@base: #302B28;
+@light-base: lighten(@base, 20%);
+@fore: #fafafa;
+
+@cp-green: #46E981;
+@cp-accent: lighten(@cp-green, 20%);
+
+@cp-red: #FF0073; // remove red
+@cp-outline: #444;
+
+
+// alertify things
+
+@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
+@padding-base: 12px;
+@success-color: rgba(76, 175, 80, .9);
+@danger-color: rgba(244, 67, 54, .8);
+@text-color: rgba(0, 0, 0, .8);
+@border-radius: 1px;
+
+@alertify-btn-fg: @fore;
+
+@alertify-btn-bg: transparent;
+@alertify-btn-bg-hover: rgba(0, 100, 0, .15);
+
+@alertify-bg: rgba(0, 0, 0, .3);
+
+@alertify-input-bg: @base;
+@alertify-input-fg: @fore;
+

package.json

@@ -16,6 +16,6 @@
   "scripts": {
       "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
       "test": "node TestSelenium.js",
-      "style": "lessc ./customize.dist/src/cryptpad.less > ./customize.dist/main.css"
+      "style": "lessc ./customize.dist/src/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/alertify.less > ./customize.dist/alertify.css"
   }
 }