diff --git a/README.md b/README.md index 3b1c852..0eaec2e 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,12 @@ popd ```bash ./manage.py runserver ``` +<<<<<<< HEAD # WSGI Deployment The server will automatically compile SCSS files at startup. If you're running behind (for example) uWSGI, you may need to manually create the static/COMPILED directory and ensure it has the correct permissions/ownership to allow -updates to be made at startup. \ No newline at end of file +updates to be made at startup. +======= +>>>>>>> readme changes diff --git a/pgaweb/static/css/styleguide.scss b/pgaweb/static/css/styleguide.scss new file mode 100644 index 0000000..570f405 --- /dev/null +++ b/pgaweb/static/css/styleguide.scss @@ -0,0 +1,83 @@ +.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.15em; + height: 70px; + justify-content: center; + width: 100%; + margin: 0 0 10px; +} + +.chip-container { + margin-bottom: 10px; + margin-top: 15px; +} + +@import "styleguide/primaryblue"; +@import "styleguide/othercolors"; +@import "styleguide/colorsgrey"; +@import "styleguide/typography"; +@import "styleguide/alert"; +@import "styleguide/github.css"; + +.page-container { + padding-top: 20px; + .navbar { + margin-bottom: 10px; + + li.current-page { + border: 3px solid $primary-blue; + border-radius: 5px; + + a { + padding-bottom: 14px; + } + } + + li { + height: 41px; + border: 3px solid transparent; + + a { + line-height: 6px; + font-weight: 500; + } + } + } + + .styleguide { + h1.styleguide-title { + margin-top: 10px; + } + + .codeBlock pre { + border-radius: 0; + display: block; + padding: 9.5px; + margin: 20px 0 10px; + font-size: 13px; + line-height: 1.42857143; + color: #333; + word-break: break-all; + word-wrap: break-word; + background-color: #f5f5f5; + border: 1px solid #ddd; + } + + h2 { + margin-top: 40px; + } + + .row { + margin-top: 10px; + margin-bottom: 10px; + } + + .font-white { + color: #ffffff; + } + } +} \ No newline at end of file diff --git a/pgaweb/static/css/styleguide/_alert.scss b/pgaweb/static/css/styleguide/_alert.scss new file mode 100644 index 0000000..26680b7 --- /dev/null +++ b/pgaweb/static/css/styleguide/_alert.scss @@ -0,0 +1,155 @@ +.alert-icon { + display: flex; + align-items: center; + color: white; + padding: 15px 15px 15px 17px; + width: 50px; + min-height: 50px; + font-size: 14px; + text-align: center; + align-self: stretch; + flex-shrink: 0; +} + +.alert-row { + display: block; + width: auto; +} + +.alert-box { + padding: 0px; + display: inline-block; +} + +.alert.alert-info { + padding: 15px; +} + +.success-icon { + background: $color-green-3; +} + +.error-icon { + background: $color-red-3; +} + +.alert-text { + display: inline-block; + padding: 0 12px 0 10px; + align-self: center; + // To make sure IE picks up the correct font + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.alert-info { + border-color: $color-blue-2; + background-image: none; +} + +.alert-danger { + background-image: none; +} + +.grid-error, .graph-error { + .alert-row { + align-items: center; + height: 100%; + display: flex; + justify-content: center; + } +} + +.ajs-message { + .media { + display: block; + } +} + +.alert { + .media { + .media-body { + display: inline-block; + width: auto; + .alert-icon { + display: inline-block; + } + .alert-text { + display: inline-block; + } + } + } +} + +.pg-prop-status-bar { + padding: 5px; + + .media-body { + display: flex; + width: auto; + } + + .alert-icon { + padding: 8px 8px 8px 10.5px; + width: 35px; + height: 35px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + min-height: auto; + } + + .alert-text { + flex-grow: 1; + border: 1px solid $color-red-2; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + padding: 7px 12px 6px 10px; + border-left: none; + } + + .error-in-footer { + border-radius: 4px; + + .alert-text { + border-color: $color-red-2; + } + } + + .success-in-footer { + border-radius: 4px; + + .alert-text { + border-color: $color-green-2; + } + } + + .info-in-footer { + border: 1px solid $primary-blue; + border-radius: 4px; + height: 35px; + + .alert-text { + border: none; + } + } +} + +//Internet Explorer specific CSS +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .styleguide { + .alert-danger { + width: auto; + } + + .alert-info { + width: auto; + } + } + + .alert-danger { + width: 90%; + } + + .alert-info { + width: 90%; + } +} diff --git a/pgaweb/static/css/styleguide/_colorsgrey.scss b/pgaweb/static/css/styleguide/_colorsgrey.scss new file mode 100644 index 0000000..d27d704 --- /dev/null +++ b/pgaweb/static/css/styleguide/_colorsgrey.scss @@ -0,0 +1,62 @@ +$color-gray-1: #f9f9f9; +$color-gray-2: #e8e8e8; +$color-gray-3: #cccccc; +$color-gray-4: #888888; +$color-gray-5: #555555; +$color-gray-6: #333333; + +.bg-gray-1 { + background-color: $color-gray-1; +} + +.bg-gray-2 { + background-color: $color-gray-2; +} + +.bg-gray-3 { + background-color: $color-gray-3; +} + +.bg-gray-4 { + background-color: $color-gray-4; +} + +.bg-gray-5 { + background-color: $color-gray-5; +} + +.bg-gray-6 { + background-color: $color-gray-6; +} + +.border-gray-1 { + border-color: $color-gray-1; +} + +.border-gray-2 { + border-color: $color-gray-2; +} + +.border-gray-3 { + border-color: $color-gray-3; +} + +.border-gray-4 { + border-color: $color-gray-4; +} + +.border-gray-5 { + border-color: $color-gray-5; +} + +.border-gray-6 { + border-color: $color-gray-6; +} + +.font-gray-4 { + color: $color-gray-4; +} + +.font-gray-6 { + color: $color-gray-6; +} diff --git a/pgaweb/static/css/styleguide/_othercolors.scss b/pgaweb/static/css/styleguide/_othercolors.scss new file mode 100644 index 0000000..4f20656 --- /dev/null +++ b/pgaweb/static/css/styleguide/_othercolors.scss @@ -0,0 +1,78 @@ +$color-blue-2: #84acdd; +$color-red-1: #f2dede; +$color-red-2: #de8585; +$color-red-3: #d0021b; +$color-green-2: #a2c189; +$color-green-3: #3a773a; + +.bg-blue-1 { + background-color: #e7f2ff; +} + +.bg-blue-2 { + background-color: $color-blue-2; +} + +.bg-red-1 { + background-color: $color-red-1; +} + +.bg-red-2 { + background-color: $color-red-2; +} + +.bg-red-3 { + background-color: $color-red-3; +} + +.bg-green-1 { + background-color: #dff0d7; +} + +.bg-green-2 { + background-color: #a2c189; +} + +.bg-green-3 { + background-color: $color-green-3; +} + +.border-blue-1 { + border-color: #e7f2ff; +} + +.border-blue-2 { + border-color: $color-blue-2; +} + +.border-red-1 { + border-color: $color-red-1; +} + +.border-red-2 { + border-color: $color-red-2; +} + +.border-red-3 { + border-color: $color-red-3; +} + +.border-green-1 { + border-color: #dff0d7; +} + +.border-green-2 { + border-color: #a2c189; +} + +.border-green-3 { + border-color: $color-green-3; +} + +.font-red-3 { + color: $color-red-3; +} + +.font-green-3 { + color: $color-green-3; +} diff --git a/pgaweb/static/css/styleguide/_primaryblue.scss b/pgaweb/static/css/styleguide/_primaryblue.scss new file mode 100644 index 0000000..49d62a3 --- /dev/null +++ b/pgaweb/static/css/styleguide/_primaryblue.scss @@ -0,0 +1,13 @@ +$primary-blue: #2c76b4; + +.bg-primary-blue { + background-color: $primary-blue; +} + +.border-primary-blue { + border-color: $primary-blue; +} + +.font-primary-blue { + color: $primary-blue; +} \ No newline at end of file diff --git a/pgaweb/static/css/styleguide/_typography.scss b/pgaweb/static/css/styleguide/_typography.scss new file mode 100644 index 0000000..b63f6ae --- /dev/null +++ b/pgaweb/static/css/styleguide/_typography.scss @@ -0,0 +1,23 @@ +.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/pgaweb/static/css/styleguide/github.css b/pgaweb/static/css/styleguide/github.css new file mode 100644 index 0000000..f012505 --- /dev/null +++ b/pgaweb/static/css/styleguide/github.css @@ -0,0 +1,61 @@ +hll { background-color: #ffffcc } +.c { color: #999988; font-style: italic } /* Comment */ +.err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.k { color: #000000; font-weight: bold } /* Keyword */ +.o { color: #000000; font-weight: bold } /* Operator */ +.cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ +.c1 { color: #999988; font-style: italic } /* Comment.Single */ +.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.ge { color: #000000; font-style: italic } /* Generic.Emph */ +.gr { color: #aa0000 } /* Generic.Error */ +.gh { color: #999999 } /* Generic.Heading */ +.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.go { color: #888888 } /* Generic.Output */ +.gp { color: #555555 } /* Generic.Prompt */ +.gs { font-weight: bold } /* Generic.Strong */ +.gu { color: #aaaaaa } /* Generic.Subheading */ +.gt { color: #aa0000 } /* Generic.Traceback */ +.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ +.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ +.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ +.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ +.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ +.kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.m { color: #009999 } /* Literal.Number */ +.s { color: #d01040 } /* Literal.String */ +.na { color: #008080 } /* Name.Attribute */ +.nb { color: #0086B3 } /* Name.Builtin */ +.nc { color: #445588; font-weight: bold } /* Name.Class */ +.no { color: #008080 } /* Name.Constant */ +.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ +.ni { color: #800080 } /* Name.Entity */ +.ne { color: #990000; font-weight: bold } /* Name.Exception */ +.nf { color: #990000; font-weight: bold } /* Name.Function */ +.nl { color: #990000; font-weight: bold } /* Name.Label */ +.nn { color: #555555 } /* Name.Namespace */ +.nt { color: #000080 } /* Name.Tag */ +.nv { color: #008080 } /* Name.Variable */ +.ow { color: #000000; font-weight: bold } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #009999 } /* Literal.Number.Float */ +.mh { color: #009999 } /* Literal.Number.Hex */ +.mi { color: #009999 } /* Literal.Number.Integer */ +.mo { color: #009999 } /* Literal.Number.Oct */ +.sb { color: #d01040 } /* Literal.String.Backtick */ +.sc { color: #d01040 } /* Literal.String.Char */ +.sd { color: #d01040 } /* Literal.String.Doc */ +.s2 { color: #d01040 } /* Literal.String.Double */ +.se { color: #d01040 } /* Literal.String.Escape */ +.sh { color: #d01040 } /* Literal.String.Heredoc */ +.si { color: #d01040 } /* Literal.String.Interpol */ +.sx { color: #d01040 } /* Literal.String.Other */ +.sr { color: #009926 } /* Literal.String.Regex */ +.s1 { color: #d01040 } /* Literal.String.Single */ +.ss { color: #990073 } /* Literal.String.Symbol */ +.bp { color: #999999 } /* Name.Builtin.Pseudo */ +.vc { color: #008080 } /* Name.Variable.Class */ +.vg { color: #008080 } /* Name.Variable.Global */ +.vi { color: #008080 } /* Name.Variable.Instance */ +.il { color: #009999 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/pgaweb/templates/pgaweb/base.html b/pgaweb/templates/pgaweb/base.html index bece71f..34ee846 100755 --- a/pgaweb/templates/pgaweb/base.html +++ b/pgaweb/templates/pgaweb/base.html @@ -64,6 +64,7 @@
@@ -100,9 +101,10 @@ + + {% block body %}{% endblock %} - {% block scripts %}{% endblock %} diff --git a/pgaweb/templates/pgaweb/page.html b/pgaweb/templates/pgaweb/page.html index 88057cd..00c08d3 100644 --- a/pgaweb/templates/pgaweb/page.html +++ b/pgaweb/templates/pgaweb/page.html @@ -11,7 +11,7 @@ -+ Use alerts to provide feedback to the user or call + attention to important information the user should know +
+ +Use this to provide feedback on an event happened correctly
+ +
+<div class="alert-row">
+ <div class="alert alert-success border-green-2 font-green-3 text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon success-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>
+ Use this to provide feedback that something went wrong
+ +
+<div class="alert-row">
+ <div class="alert alert-danger border-red-2 font-red-3 text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon error-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>
+ + Use this for non urgent info that users should know. + Links can also be placed within the banner if needed. +
+ +
+<div class="alert-row">
+ <div class="alert alert-info border-blue-2 font-primary-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>
+ <div class="pg-prop-status-bar">
+ <div class="success-in-footer alert-success border-green-2 font-green-3 text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon success-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="pg-prop-status-bar">
+ <div class="error-in-footer alert-danger border-red-2 font-red-3 text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon error-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="pg-prop-status-bar">
+ <div class="info-in-footer alert-info border-blue-2 font-primary-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>
+ Below are the colors for pgadmin4. To use, copy and paste the hex codes into the CSS.
+The current app may have more colors than what is included here. When a color is encountered + in the app that is not documented here, default to replacing that color with one that is documented here.
+Each color listed on this page can be used for Background, Font, and Border. Pre-pend each + class name with .bg- or .font- or .border- to use as background + or border.
+bg-color-yellow
+ border-color-yellow
+ font-color-yellow
+ This color should be used to call attention to the main part of the app. Use sparingly.
+ +For text, avoid using black or #000 to lower the contrast between the background and text.
+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.
++ Welcome to the style guide for UI elements in pgAdmin4 to help the product stay consistent as it grows. +
+ ++ The style guide is intended for developers and designers to leverage when implementing features in pgAdmin UI. +
+{% endblock %} \ No newline at end of file diff --git a/pgaweb/urls.py b/pgaweb/urls.py index 859b735..b8ce505 100644 --- a/pgaweb/urls.py +++ b/pgaweb/urls.py @@ -32,6 +32,10 @@ urlpatterns = [ url(r'^development/resources/$', 'pgaweb.views.development_resources', name='development_resources'), url(r'^development/team/$', 'pgaweb.views.development_team', name='development_team'), + url(r'^styleguide/$', 'pgaweb.views.styleguide_index', name='styleguide_index'), + url(r'^styleguide/colors$', 'pgaweb.views.styleguide_colors', name='styleguide_colors'), + url(r'^styleguide/alerts', 'pgaweb.views.styleguide_alerts', name='styleguide_alerts'), + url(r'^support/$', 'pgaweb.views.support_index', name='support_index'), url(r'^support/issues/$', 'pgaweb.views.support_issues', name='support_issues'), url(r'^support/list/$', 'pgaweb.views.support_list', name='support_list'), diff --git a/pgaweb/views.py b/pgaweb/views.py index 95300b2..32cca72 100644 --- a/pgaweb/views.py +++ b/pgaweb/views.py @@ -56,6 +56,19 @@ def development_team(request): return render_to_response('pgaweb/development/team.html', {}) +# Handle the Styleguide level pages +def styleguide_index(request): + return render_to_response('pgaweb/styleguide/index.html', {}) + + +def styleguide_colors(request): + return render_to_response('pgaweb/styleguide/colors.html', {}) + + +def styleguide_alerts(request): + return render_to_response('pgaweb/styleguide/alerts.html', {}) + + # Handle the Support level pages def support_index(request): return render_to_response('pgaweb/support/index.html', {}) diff --git a/static/yarn.lock b/static/yarn.lock new file mode 100644 index 0000000..18a2e2a --- /dev/null +++ b/static/yarn.lock @@ -0,0 +1,25 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +bootstrap@^3.3.7: + version "3.3.7" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71" + +font-awesome@^4.7.0: + version "4.7.0" + resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" + +font-mfizz@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/font-mfizz/-/font-mfizz-2.3.0.tgz#f12582680d2f3d1fc111e94a44c0b57b3b5d5c05" + +fotorama@^4.6.4: + version "4.6.4" + resolved "https://registry.yarnpkg.com/fotorama/-/fotorama-4.6.4.tgz#7376961b6c7eeccb6c76411aceba7795ffe22eae" + dependencies: + jquery ">=1.8" + +jquery@>=1.8, jquery@^3.2.0: + version "3.2.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"