From f2d2075d81718ec02550fb592851aa330d327b24 Mon Sep 17 00:00:00 2001 From: Joao Pedro De Almeida Pereira Date: Fri, 30 Jun 2017 10:23:12 +0100 Subject: [PATCH] Update alertify alerts to use the styling defined in the styleguide (missed some files in the original commit). --- .../static/js/alerts/alertify_wrapper.js | 40 +++++ web/pgadmin/static/scss/_alert.scss | 119 +++++++++++++ .../static/scss/_alertify.overrides.scss | 166 ++++++++++++++++++ web/pgadmin/static/scss/_othercolors.scss | 156 ++++++++++++++++ web/pgadmin/static/scss/_typography.scss | 68 +++++++ .../alerts/alertify_wrapper_spec.js | 41 +++++ 6 files changed, 590 insertions(+) create mode 100644 web/pgadmin/static/js/alerts/alertify_wrapper.js create mode 100644 web/pgadmin/static/scss/_alert.scss create mode 100644 web/pgadmin/static/scss/_alertify.overrides.scss create mode 100644 web/pgadmin/static/scss/_othercolors.scss create mode 100644 web/pgadmin/static/scss/_typography.scss create mode 100644 web/regression/javascript/alerts/alertify_wrapper_spec.js diff --git a/web/pgadmin/static/js/alerts/alertify_wrapper.js b/web/pgadmin/static/js/alerts/alertify_wrapper.js new file mode 100644 index 000000000..c47091ee8 --- /dev/null +++ b/web/pgadmin/static/js/alerts/alertify_wrapper.js @@ -0,0 +1,40 @@ +define([ + 'jquery', + 'alertify', +], function ($, alertify) { + var AlertifyWrapper = function () { + var success = function (message, timeout) { + var alertMessage = '\ +
\ +
\ +
\ + \ +
\ +
' + message + '
\ +
\ +
'; + var alert = alertify.success(alertMessage, timeout); + return alert; + }; + + var error = function(message, timeout) { + var alertMessage = '\ +
\ +
\ +
\ + \ +
\ +
' + message + '
\ +
\ +
'; + var alert = alertify.error(alertMessage, timeout); + return alert; + }; + + $.extend(this, { + 'success': success, + 'error': error, + }); + }; + return AlertifyWrapper; +}); \ No newline at end of file diff --git a/web/pgadmin/static/scss/_alert.scss b/web/pgadmin/static/scss/_alert.scss new file mode 100644 index 000000000..ea25d31c7 --- /dev/null +++ b/web/pgadmin/static/scss/_alert.scss @@ -0,0 +1,119 @@ +/*doc +--- +title: Alerts +name: alerts +category: alerts +--- + +```html_example +
+
+
+
+
+ +
+
+ Successfully run. Total query runtime: 32 msec. 1 row retrieved +
+
+
+
+
+ +
+
+
+
+
+ +
+
+ Error retrieving properties - INTERNAL SERVER ERROR +
+
+
+
+
+ +
+
+
+
+
+ This is a neutral message +
+
+
+
+
+ +``` +*/ + + +// 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; +} + + diff --git a/web/pgadmin/static/scss/_alertify.overrides.scss b/web/pgadmin/static/scss/_alertify.overrides.scss new file mode 100644 index 000000000..b4460644d --- /dev/null +++ b/web/pgadmin/static/scss/_alertify.overrides.scss @@ -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; +} diff --git a/web/pgadmin/static/scss/_othercolors.scss b/web/pgadmin/static/scss/_othercolors.scss new file mode 100644 index 000000000..92cfe5af7 --- /dev/null +++ b/web/pgadmin/static/scss/_othercolors.scss @@ -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 +
+
+
+
+ #e7f2ff +
+
+
+
+ #84acdd +
+
+
+
+
+
+
+
+
+ #f2dede +
+
+
+
+ #de8585 +
+
+
+
+ #d0021b +
+
+
+
+
+
+
+
+
+ #dff0d7 +
+
+
+
+ #a2c189 +
+
+
+
+ #3a773a +
+
+
+
+``` + +*/ + +.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; +} diff --git a/web/pgadmin/static/scss/_typography.scss b/web/pgadmin/static/scss/_typography.scss new file mode 100644 index 000000000..60801702e --- /dev/null +++ b/web/pgadmin/static/scss/_typography.scss @@ -0,0 +1,68 @@ +/*doc +--- +title: Typography +name: typography +category: typography +--- + +Font Typography + +```html_example_table +
+ Body 14 px Helvetica Neue +
+ +
+ Body 14 px Helvetica Neue bold +
+ +
+ Body 13 px Helvetica Neue +
+ +
+ Body 13 px Helvetica Neue bold +
+ +
+ Body 12 px Helvetica Neue +
+ +
+ Body 12 px Helvetica Neue bold +
+ +
+ Body 11 px Helvetica Neue +
+ +
+ Body 11 px Helvetica Neue bold +
+``` + +*/ + +.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; +} diff --git a/web/regression/javascript/alerts/alertify_wrapper_spec.js b/web/regression/javascript/alerts/alertify_wrapper_spec.js new file mode 100644 index 000000000..b385c95d5 --- /dev/null +++ b/web/regression/javascript/alerts/alertify_wrapper_spec.js @@ -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"'); + }); + }); +});