infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

add alertify for prettier dialogs

Browse Source
pull/1/head
ansuz 9 years ago
parent 7e8d66a141
commit a48c96c053
7 changed files with 472 additions and 13 deletions
Show Stats Download Patch File Download Diff File

3
bower.json
Unescape Escape View File

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

194
customize.dist/alertify.css
Unescape Escape View File

@ -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;
}

4
customize.dist/main.js
Unescape Escape View File

@ -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; }

241
customize.dist/src/alertify.less
Unescape Escape View File

@ -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;
}
}
}

11
customize.dist/src/cryptpad.less
Unescape Escape View File

@ -1,12 +1,4 @@
@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;
@import "./variables.less";
.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
@font-face{
@ -290,3 +282,4 @@ tbody {
max-width: 100px;
}

30
customize.dist/src/variables.less
Unescape Escape View File

@ -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;

2
package.json
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save