Update alertify alerts to use the styling defined in the styleguide (missed some files in the original commit).
Joao Pedro De Almeida Pereira
Dave Page
parent
2a30a86e7d
commit
f2d2075d81
|
|
@ -0,0 +1,40 @@
|
|||
define([
|
||||
'jquery',
|
||||
'alertify',
|
||||
], function ($, alertify) {
|
||||
var AlertifyWrapper = function () {
|
||||
var success = function (message, timeout) {
|
||||
var alertMessage = '\
|
||||
<div class="media font-green-3 text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-icon">\
|
||||
<i class="fa fa-check" aria-hidden="true"></i>\
|
||||
</div>\
|
||||
<div class="alert-text">' + message + '</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
var alert = alertify.success(alertMessage, timeout);
|
||||
return alert;
|
||||
};
|
||||
|
||||
var error = function(message, timeout) {
|
||||
var alertMessage = '\
|
||||
<div class="media font-red-3 text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-icon">\
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
|
||||
</div>\
|
||||
<div class="alert-text">' + message + '</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
var alert = alertify.error(alertMessage, timeout);
|
||||
return alert;
|
||||
};
|
||||
|
||||
$.extend(this, {
|
||||
'success': success,
|
||||
'error': error,
|
||||
});
|
||||
};
|
||||
return AlertifyWrapper;
|
||||
});
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
/*doc
|
||||
---
|
||||
title: Alerts
|
||||
name: alerts
|
||||
category: alerts
|
||||
---
|
||||
|
||||
```html_example
|
||||
<div class="alert-row">
|
||||
<div class="alert alert-success text-14 alert-box">
|
||||
<div class="media">
|
||||
<div class="media-body media-middle">
|
||||
<div class="alert-icon">
|
||||
<i class="fa fa-check" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="alert-text">
|
||||
Successfully run. Total query runtime: 32 msec. 1 row retrieved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert-row">
|
||||
<div class="alert alert-danger font-red text-14 alert-box">
|
||||
<div class="media">
|
||||
<div class="media-body media-middle">
|
||||
<div class="alert-icon">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="alert-text">
|
||||
Error retrieving properties - INTERNAL SERVER ERROR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert-row">
|
||||
<div class="alert alert-info font-blue text-14 alert-box">
|
||||
<div class="media">
|
||||
<div class="media-body media-middle">
|
||||
<div class="alert-text">
|
||||
This is a neutral message
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
// from bootstrap scss:
|
||||
|
||||
@if $enable-flex {
|
||||
.media {
|
||||
display: flex;
|
||||
}
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
.media-middle {
|
||||
align-self: center;
|
||||
}
|
||||
.media-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
} @else {
|
||||
.media,
|
||||
.media-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.media-body {
|
||||
width: 10000px;
|
||||
}
|
||||
.media-left,
|
||||
.media-right,
|
||||
.media-body {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
}
|
||||
.media-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.media-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-box {
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.alert-text {
|
||||
display: inline-block;
|
||||
padding: 0 12px 0 10px;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
border-color: #84acdd
|
||||
}
|
||||
|
||||
.media-body {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
/* Overrides alertify js headers */
|
||||
.alertify {
|
||||
.ajs-header {
|
||||
padding: 6px 10px !important;
|
||||
min-height: 35px;
|
||||
max-height: 35px;
|
||||
border-bottom: 2px solid darkgray;
|
||||
background-color: #2C76B4;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Overrides alertify js headers hovering behaviour*/
|
||||
.ajs-header:hover {
|
||||
background-color: #2C76B4;
|
||||
}
|
||||
|
||||
/* Removes padding from alertify footer */
|
||||
.ajs-footer {
|
||||
padding: 0;
|
||||
min-height: 35px;
|
||||
}
|
||||
|
||||
/* Restyling alertify buttons */
|
||||
.ajs-footer .ajs-buttons {
|
||||
background-color: #D2D2D2;
|
||||
border-width: 2px 0px 0px 0px;
|
||||
border-style: solid;
|
||||
border-color: rgb(85, 85, 85);
|
||||
}
|
||||
|
||||
.ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button,
|
||||
.ajs-footer .ajs-buttons.ajs-primary .ajs-button {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.ajs-footer .ajs-buttons .ajs-button {
|
||||
min-width: 40px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.ajs-commands {
|
||||
margin: -22px 4px 0 0;
|
||||
}
|
||||
|
||||
/* Replaces alertify button icons */
|
||||
.ajs-commands button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Prevent text blur in the runtime */
|
||||
.ajs-dimmer,
|
||||
.ajs-modal {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
.ajs-commands button.ajs-maximize {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZklEQVQ4jcWTuw2AMAxEn5jBs7B/e0gpmAiKEGRS5QDBSS7v+Q8fSsCWQgDTA+DsGgJYuypumTNkWCWZg9q/HIAOSDim/xTUcu0exXXaxQG0teRVWQPLx2Gbe8B55yNqv7C4GV/TDq//J11odoZgAAAAAElFTkSuQmCC);
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
.ajs-commands button.ajs-close {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4jd2SwQnAIAxF36GH0pOTFHEgF3IkR5LO0F4SCGJVEHroAy/f/E+igV+yAa6hO7nrcgAZuIBg9CBalppXEnDL0RA1q556ASdQqhBrLlLTxVch1uxHZiU2AuKs2Vdt23GGHSy/wfIvzOzBPhpjaRO/5wG/szevJ+ZXzAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
/* Restyling alertify dialogue panel boundaries */
|
||||
.ajs-dialog {
|
||||
border: 3px solid #DDDDDD;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ajs-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ajs-handle {
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.alertify.ajs-maximized .ajs-commands,
|
||||
.alertify.ajs-resizable .ajs-commands {
|
||||
margin: 2px 0px 0 0;
|
||||
}
|
||||
|
||||
.ajs-commands {
|
||||
position: absolute;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.ajs-pin, .ajs-maximize, .ajs-close {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #9E9E9E !important;
|
||||
background-color: #ddd !important;
|
||||
font-size: 12px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
position: relative;
|
||||
//float: right;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {
|
||||
border: 2px solid #CCCCCC !important;
|
||||
}
|
||||
|
||||
.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkElEQVQ4jWNkwAR8DAwMBxkYGMTQxF8xMDDYMzAwfMKiBwMYMDAw3GRgYPgPxTehYiSBKCQDonApYiLV1KFjABsDA4MpEt8UKkYUkGBgYDjPgAhAGD4PlSPooqNYNMPwUXRXM+IwBAbaoXQlktg/ZMUsWAxAVvASmyZCBiCDNwTkCRrwasANIOgFQoADinECAAtnIEoWoODLAAAAAElFTkSuQmCC);
|
||||
background-size: 13px;
|
||||
}
|
||||
|
||||
.alertify.ajs-maximized .ajs-commands button.ajs-maximize {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8klEQVQ4jZ3QMUpDQRCH8V+ewULQE4iERTyCrQiDCpbaCKKljbV4A89gqVgGrCMDWlpaWwVPoFYiIjYv8hBJXjLN7s7u9+3wZ4aKiOWI2IJOi8dHuM7MXxj3WMHe3CRBKeUGvVJKllJG8CrmoNty6jMsYKeGoY/jtgI4bez7OMjMr2oKwaieRzDMIljDRUSgXQZPeG2cv7GOffQ7ETGPcyw2HozWQWY+jLN3M/MzIu4wwNKf+zeMFVSQmY/YbfzeuiqIiAonZgi1quErHNa9F7xPM8FlAx5iA9ttJRVu8VHDm5k5rDNpLRERWxHR+6c/MZMfLIJDwzY66IkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
/* Restyling alertify query results messages */
|
||||
.alertify-notifier.ajs-right .ajs-message.ajs-visible {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.alertify-notifier .ajs-message {
|
||||
width: initial;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.alertify-notifier {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
button.pg-alertify-button {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.fa.pg-alertify-button:before {
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.ajs-text-smoothing {
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.ajs-message.ajs-error.ajs-visible {
|
||||
@extend .bg-red-1;
|
||||
@extend .border-red-2;
|
||||
@extend .ajs-text-smoothing;
|
||||
}
|
||||
|
||||
.ajs-message.ajs-success.ajs-visible {
|
||||
@extend .bg-green-1;
|
||||
@extend .border-green-2;
|
||||
@extend .ajs-text-smoothing;
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
/*doc
|
||||
---
|
||||
title: Others
|
||||
name: z-othercolors
|
||||
category: colors
|
||||
---
|
||||
These colors should be used to highlight hover options in dropdown menus and catalog browser or to tell the user when something is right or wrong.
|
||||
|
||||
|
||||
```html_example
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-blue-1">
|
||||
#e7f2ff
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-blue-2">
|
||||
#84acdd
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-red-1">
|
||||
#f2dede
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-red-2">
|
||||
#de8585
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-red-3">
|
||||
#d0021b
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-green-1">
|
||||
#dff0d7
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-green-2">
|
||||
#a2c189
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="color-chip bg-green-3">
|
||||
#3a773a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
.color-chip {
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .15);
|
||||
color: rgba(0, 0, 0, .65);
|
||||
display: flex;
|
||||
font-size: 1.25em;
|
||||
height: 100px;
|
||||
justify-content: center;
|
||||
margin: 0 0 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bg-blue-1 {
|
||||
background-color: #e7f2ff;
|
||||
}
|
||||
|
||||
.bg-blue-2 {
|
||||
background-color: #84acdd;
|
||||
}
|
||||
|
||||
.bg-red-1 {
|
||||
background-color: #f2dede;
|
||||
}
|
||||
|
||||
.bg-red-2 {
|
||||
background-color: #de8585;
|
||||
}
|
||||
|
||||
.bg-red-3 {
|
||||
background-color: #d0021b;
|
||||
}
|
||||
|
||||
.bg-green-1 {
|
||||
background-color: #dff0d7;
|
||||
}
|
||||
|
||||
.bg-green-2 {
|
||||
background-color: #a2c189;
|
||||
}
|
||||
|
||||
.bg-green-3 {
|
||||
background-color: #3a773a;
|
||||
}
|
||||
|
||||
.border-blue-1 {
|
||||
border-color: #e7f2ff;
|
||||
}
|
||||
|
||||
.border-blue-2 {
|
||||
border-color: #84acdd;
|
||||
}
|
||||
|
||||
.border-red-1 {
|
||||
border-color: #f2dede;
|
||||
}
|
||||
|
||||
.border-red-2 {
|
||||
border-color: #de8585;
|
||||
}
|
||||
|
||||
.border-red-3 {
|
||||
border-color: #d0021b;
|
||||
}
|
||||
|
||||
.border-green-1 {
|
||||
border-color: #dff0d7;
|
||||
}
|
||||
|
||||
.border-green-2 {
|
||||
border-color: #a2c189;
|
||||
}
|
||||
|
||||
.border-green-3 {
|
||||
border-color: #3a773a;
|
||||
}
|
||||
|
||||
.font-red-3 {
|
||||
color: #d0021b;
|
||||
}
|
||||
|
||||
.font-green-3 {
|
||||
color: #3a773a;
|
||||
}
|
||||
|
||||
.font-white {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
/*doc
|
||||
---
|
||||
title: Typography
|
||||
name: typography
|
||||
category: typography
|
||||
---
|
||||
|
||||
Font Typography
|
||||
|
||||
```html_example_table
|
||||
<div class="text-14">
|
||||
Body 14 px Helvetica Neue
|
||||
</div>
|
||||
|
||||
<div class="text-14 text-bold">
|
||||
Body 14 px Helvetica Neue bold
|
||||
</div>
|
||||
|
||||
<div class="text-13">
|
||||
Body 13 px Helvetica Neue
|
||||
</div>
|
||||
|
||||
<div class="text-13 text-bold">
|
||||
Body 13 px Helvetica Neue bold
|
||||
</div>
|
||||
|
||||
<div class="text-12">
|
||||
Body 12 px Helvetica Neue
|
||||
</div>
|
||||
|
||||
<div class="text-12 text-bold">
|
||||
Body 12 px Helvetica Neue bold
|
||||
</div>
|
||||
|
||||
<div class="text-11">
|
||||
Body 11 px Helvetica Neue
|
||||
</div>
|
||||
|
||||
<div class="text-11 text-bold">
|
||||
Body 11 px Helvetica Neue bold
|
||||
</div>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-14 {
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-13 {
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.text-12 {
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-11 {
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
//////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// pgAdmin 4 - PostgreSQL Tools
|
||||
//
|
||||
// Copyright (C) 2013 - 2017, The pgAdmin Development Team
|
||||
// This software is released under the PostgreSQL Licence
|
||||
//
|
||||
//////////////////////////////////////////////////////////////////////////
|
||||
|
||||
import alertify from '../../../pgadmin/static/vendor/alertifyjs/alertify';
|
||||
import AlertifyWrapper from '../../../pgadmin/static/js/alerts/alertify_wrapper';
|
||||
|
||||
describe('alertify_wrapper', function () {
|
||||
describe('success', function () {
|
||||
it('calls the success function from alertify and adds the checkmark to the element', function () {
|
||||
spyOn(alertify, 'success');
|
||||
var alertifyWrapper = new AlertifyWrapper();
|
||||
|
||||
alertifyWrapper.success('Yay, congrats!', 1);
|
||||
|
||||
var calledWithMessage = alertify.success.calls.mostRecent().args[0];
|
||||
|
||||
expect(calledWithMessage).toContain('Yay, congrats!');
|
||||
expect(calledWithMessage).toContain('class="fa fa-check"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('error', function () {
|
||||
it('calls the error function from alertify and adds the warning symbol to the element', function () {
|
||||
spyOn(alertify, 'error');
|
||||
var alertifyWrapper = new AlertifyWrapper();
|
||||
|
||||
alertifyWrapper.error('bad, very bad', 1);
|
||||
|
||||
var calledWithMessage = alertify.error.calls.mostRecent().args[0];
|
||||
|
||||
expect(calledWithMessage).toContain('bad, very bad');
|
||||
expect(calledWithMessage).toContain('class="fa fa-exclamation-triangle"');
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue