From 533aaa2fa3844220240f41df9af6202dca891756 Mon Sep 17 00:00:00 2001 From: Arun Kollan Date: Fri, 15 Apr 2016 15:30:27 +0100 Subject: [PATCH] Restyle alertify dialogues so they look like the rest of the app. Still some tweaks needed, but we're 95% of the way there. --- .../templates/preferences/preferences.js | 5 +- web/pgadmin/static/css/overrides.css | 177 +++++++++++++----- 2 files changed, 138 insertions(+), 44 deletions(-) diff --git a/web/pgadmin/preferences/templates/preferences/preferences.js b/web/pgadmin/preferences/templates/preferences/preferences.js index 51c5968b9..87609d1ad 100644 --- a/web/pgadmin/preferences/templates/preferences/preferences.js +++ b/web/pgadmin/preferences/templates/preferences/preferences.js @@ -353,10 +353,11 @@ define( return { buttons:[ { - text: "{{ _('OK') }}", key: 13, className: "btn btn-primary" + text: "{{ _(' OK ') }}", key: 13, className: "btn btn-primary fa fa-lg fa-save" + }, { - text: "{{ _('Cancel') }}", className: "btn btn-danger" + text: "{{ _(' Cancel ') }}", className: "btn btn-danger fa fa-lg fa-close" } ], focus: { element: 0 }, diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css index db7931a84..96bc98cbe 100755 --- a/web/pgadmin/static/css/overrides.css +++ b/web/pgadmin/static/css/overrides.css @@ -18,37 +18,6 @@ body { .pg-panel-content { position:absolute;top:0px;left:0px;right:0px;bottom:0px; overflow: hidden; } -/* Restyle the Alertify dialogs */ -.alertify .ajs-dialog { - border: 0px solid rgba(0,0,0,.2); -} - -.alertify .ajs-header { - background-color: #428bca; - color: #fff; -} - -.alertify .ajs-content { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.alertify .ajs-commands button.ajs-maximize { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAK0lEQVQY02P8//8/AzGABUoTUs3IwkAkIEshIw41/8k2kfoK/xOjkJGQiQBkfAYjQxwwQgAAAABJRU5ErkJggg==) !important; -} - -.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAArrAAAK6wGCiw1aAAAANElEQVQY02P8//8/AxJA4UABIwMDAwMLLgl0TdgUYgWDROF/HD7/z8DAwMiCxbdwSdq6EQDM+gkiVH1IsgAAAABJRU5ErkJggg==) !important; -} - -.alertify .ajs-commands button.ajs-close { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAVElEQVQY05WQuQ0AMQgEB8lN0H9vdhnj4B7ZJwfcJkjsImBCpaIGMMYQIDNjNbe+Su9d1bsee5yM0+AbXMPfkHrdWNKv1ZVn2oJiw5OZ8eABiCrwCW8QwRIof5qAAAAAAElFTkSuQmCC) !important; -} - -.alertify .ajs-modal { - overflow: hidden; -} - /* iFrames should have no border */ iframe { border-width: 0; @@ -64,17 +33,6 @@ iframe { padding-left: 0; } -/* Alert info panel */ -.alert-info-panel { - border: 2px solid #a1a1a1; - margin-top: 2em; - padding: 5px 5px; - background: #dddddd; - border-radius: 5px; - height: 8em; - overflow: scroll; -} - /* Prevent tree items wrapping */ .aciTree .aciTreeItem { white-space: nowrap !important; @@ -445,6 +403,7 @@ iframe { .form-control { color: #333333; + padding: 3px 6px; } .form-control[disabled], @@ -994,3 +953,137 @@ ul.nav.nav-tabs { padding-left: 0px !important; color: black; } + +/* This rule will stop Chrome apply highlighting to elements such as DIV's used as modals */ +*:focus { + outline: none; +} + +/* Alert info panel */ +.alert-info-panel { + border: 2px solid #a1a1a1; + margin-top: 2em; + padding: 5px 5px; + background: #dddddd; + border-radius: 5px; + height: 8em; + overflow: scroll; +} +/* 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; +} + +.alertify.ajs-maximized .ajs-commands, .alertify.ajs-resizable .ajs-commands { + margin: 2px 0px 0 0; +} + +/* Overrides alertify js headers hovering behaviour*/ +.alertify .ajs-header:hover { + background-color:#2C76B4; +} +/* Removes padding from alertify footer */ +.alertify .ajs-footer { + padding: 0; + min-height: 35px; +} +/* Restyling alertify buttons */ +.alertify .ajs-footer .ajs-buttons { + background-color: #D2D2D2; + border-width: 2px 0px 0px 0px; + border-style: solid; + border-color: rgb(85, 85, 85); +} + +.alertify .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button, .alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button { + margin-left: 2px; + margin-right: 2px; + margin-top:0px; + margin-bottom:0px; +} + +.alertify .ajs-footer .ajs-buttons .ajs-button { + min-width: 55px; + min-height: 33px; +} + +.alertify .ajs-commands { + margin: -22px 4px 0 0; +} + +/* Replaces alertify button icons */ +.alertify .ajs-commands button{ + margin-left: 5px; +} + +.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-commands button.ajs-maximize { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZklEQVQ4jcWTuw2AMAxEn5jBs7B/e0gpmAiKEGRS5QDBSS7v+Q8fSsCWQgDTA+DsGgJYuypumTNkWCWZg9q/HIAOSDim/xTUcu0exXXaxQG0teRVWQPLx2Gbe8B55yNqv7C4GV/TDq//J11odoZgAAAAAElFTkSuQmCC); + background-size: 14px; +} + +.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-commands button.ajs-close { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4jd2SwQnAIAxF36GH0pOTFHEgF3IkR5LO0F4SCGJVEHroAy/f/E+igV+yAa6hO7nrcgAZuIBg9CBalppXEnDL0RA1q556ASdQqhBrLlLTxVch1uxHZiU2AuKs2Vdt23GGHSy/wfIvzOzBPhpjaRO/5wG/szevJ+ZXzAAAAABJRU5ErkJggg==); +} + +.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 dialogue panel boundaries */ +.alertify .ajs-dialog { + border: 3px solid #DDDDDD; + border-radius: 0; +} +.alertify .ajs-content { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.alertify .ajs-handle { + background-image:none; +} +span.button-label { + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: initial; +} +button.ajs-button.btn.btn-primary { + margin: 2px!important; +} \ No newline at end of file