[open-ils-commits] [GIT] Evergreen ILS branch master updated. bf132add231b43cae71234d9586bac4f7d34202d
Evergreen Git
git at git.evergreen-ils.org
Thu Jul 18 12:57:11 EDT 2019
This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "Evergreen ILS".
The branch, master has been updated
via bf132add231b43cae71234d9586bac4f7d34202d (commit)
via d424f0056e80c0b7763463411c8a7ba074363144 (commit)
via a60fcd05ec4a77f08747a2cbdf22667f7b6960d2 (commit)
via 0ef978c6d5f1f7eeeece184d00ec76c80710d9bd (commit)
from 1da6a8e7a207fc13d511a31947cb8d6315fe4075 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
- Log -----------------------------------------------------------------
commit bf132add231b43cae71234d9586bac4f7d34202d
Author: Dan Wells <dbw2 at calvin.edu>
Date: Wed May 29 15:17:31 2019 -0400
LP#1823367 Make search bar area neutral
Though the color had started to grow on me, let's go back to neutral for
the top seach area, for now.
It both makes sense and would be useful to have a secondary decorative
color, but if we go that route, we probably want just one for the whole
application, so we will want to tread carefully there.
Signed-off-by: Dan Wells <dbw2 at calvin.edu>
Signed-off-by: Bill Erickson <berickxx at gmail.com>
Signed-off-by: Jane Sandberg <sandbej at linnbenton.edu>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css
index c7d59d19d3..4d2842e618 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css
@@ -13,8 +13,8 @@ select.form-control:not([size]):not([multiple]) {
#staffcat-search-form {
border-radius: 0px 0px 7px 7px;
- background-color: rgba(243, 127, 65, .1);
- box-shadow: 3px 3px 2px rgba(185, 65, 0, .2);
+ background-color: rgb(247, 247, 247);
+ box-shadow: 1px 2px 3px -1px rgba(0, 0, 0, .2);
}
#staffcat-search-form .tab-content {
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
index 18af372284..8d6e34878a 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
@@ -1,7 +1,7 @@
<!--
TODO focus search input
-->
-<div id='staffcat-search-form' class="row pb-3 mb-3 ">
+<div id='staffcat-search-form' class="row pt-3 pb-3 mb-3">
<div class="col-lg-8">
<ngb-tabset #searchTabs [activeId]="searchTab" (tabChange)="onTabChange($event)">
<ngb-tab title="Keyword Search" i18n-title id="term">
commit d424f0056e80c0b7763463411c8a7ba074363144
Author: Dan Wells <dbw2 at calvin.edu>
Date: Wed May 29 13:32:49 2019 -0400
LP#1823367 Add place to collect style guidelines
Let's start a place to collect some of the reasoning behind EG2 style
choices. This will help us be more consistent, and to recall why things
are as they are.
This commit does nothing groundbreaking, but rather tries mainly to
capture what is already being done.
Signed-off-by: Dan Wells <dbw2 at calvin.edu>
Signed-off-by: Bill Erickson <berickxx at gmail.com>
Signed-off-by: Jane Sandberg <sandbej at linnbenton.edu>
diff --git a/Open-ILS/src/eg2/STYLE_GUIDELINES.adoc b/Open-ILS/src/eg2/STYLE_GUIDELINES.adoc
new file mode 100644
index 0000000000..40ce318ae5
--- /dev/null
+++ b/Open-ILS/src/eg2/STYLE_GUIDELINES.adoc
@@ -0,0 +1,42 @@
+= Evergreen Angular App Style Guidelines
+
+== Introduction
+
+This guide serves as a place to capture thoughts and reasoning about
+stylistic choices made in the Evergreen staff client interfaces. It
+will initially have little content and no authority, but will accrue
+both over time as thoughts are expressed and recorded, and conflicts
+are worked out.
+
+
+== General
+
+* All root styles are initially from Bootstrap 4. Custom styles will
+ generally proceed as derivations from there. Eventually it may
+ amount to a unique design language, but that will take time.
+
+
+== Colors
+
+* Colors which are present primarily for decorative or aesthetic
+ purposes will be derived from the standard "Evergreen Green" with
+ a hue value of around 161.
+ * At this time there is some discreprancy as to what color the
+ official "Evergreen Green" actually is. (Since different screen
+ colorings need different shades, tints, and intensities, when we
+ say color in this context, we more precisely mean hue.) The current
+ green used in the staff client header and the standard OPAC are
+ roughly a hue value of 161 (on a 360 degree scale), while the
+ official Evergreen logo graphic uses a somewhat more blue color,
+ with a hue value of 166. This is not a large difference, but it
+ would be nice to settle this difference at some point.
+* Colors used to represent "action" elements (links, major buttons,
+ and user selection highlights) will generally be blue. At this time
+ we are normally using the standard Bootstrap blue for such elements
+ (or a close derivative).
+* Colors used to delineate minor or background elements (areas of the
+ screen, table headers, secondary buttons) will use neutral grays
+ (expressed as equal values for RGB, i.e. 0 saturation).
+* Some buttons are using the Bootstrap green and red button variants.
+ This usage is not currently well defined, but generally means "major
+ positive" (green) and "major negative" (red) actions.
commit a60fcd05ec4a77f08747a2cbdf22667f7b6960d2
Author: Dan Wells <dbw2 at calvin.edu>
Date: Wed May 29 13:06:50 2019 -0400
LP#1823367 De-encapsulate holdings grid styles to fix row highlighting
By default, Angular will encapsulate CSS styles at the component level,
applying them only to the component who loads them. The encapsulation
is helpful in some circumstances, a burden in others, and can be worked
around in at least two ways.
One way is the use of ':host /deep/' in the style declaration. This
will in effect apply the style to all child components of the current
component's host, and is what we were doing here to style the grid rows
internal to the holdings component. This worked, but the encapsulated
style is created in such a way that it overrides any global styles. In
addition, /deep/ is deprecated (although with no clear replacement).
A second way to work around CSS encapsulation is to simply disable it.
Right now, our grid styles are all at the global level, as encapsulation
is disabled in the grid. Combined with the facts above, the end result
is that our new row styles always trump the grid highlight style, and
the rows no longer highlight.
There are a number of ways to work around this, but none seemed
obviously better than the others at this stage of development. This
commit does both the simplest option and the one which matches the
existing grid practice. That is, it disables CSS encapsulation for the
holdings component so that the holdings styles can coexist with, and be
overridden by, the grid styles (as needed in this case).
Signed-off-by: Dan Wells <dbw2 at calvin.edu>
Signed-off-by: Bill Erickson <berickxx at gmail.com>
Signed-off-by: Jane Sandberg <sandbej at linnbenton.edu>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css
index a5dbf13af6..0a604184ba 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css
@@ -1,29 +1,21 @@
/*
-:host /deep/ allows us to share style with child components.
-In this case, the holdings components wants its grid to see
-the CSS we have defined for different row types
-
-See https://v2.angular.io/docs/ts/latest/guide/component-styles.html
-*/
-
-/*
-:host /deep/ .holdings-copy-row {
+.holdings-copy-row {
}
*/
/* colors are based on "Evergreen Green", tinted and desaturated */
-:host /deep/ .holdings-volume-row {
+.holdings-volume-row {
background-color: #c9efe4;
}
-:host /deep/ .holdings-org-row {
+.holdings-org-row {
color: rgba(0, 0, 0, .8);
background-color: #e1efeb;
}
/* Add additional classes for more deeply nested org unit hierarchies */
/* e.g.
-:host /deep/ .holdings-org-row-0 {}
-:host /deep/ .holdings-org-row-1 {}
+.holdings-org-row-0 {}
+.holdings-org-row-1 {}
*/
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts
index a89444b868..a41252117c 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts
@@ -1,4 +1,5 @@
-import {Component, OnInit, Input, ViewChild} from '@angular/core';
+import {Component, OnInit, Input, ViewChild, ViewEncapsulation
+ } from '@angular/core';
import {Router} from '@angular/router';
import {Observable, Observer, of} from 'rxjs';
import {map} from 'rxjs/operators';
@@ -73,7 +74,8 @@ class HoldingsEntry {
@Component({
selector: 'eg-holdings-maintenance',
templateUrl: 'holdings.component.html',
- styleUrls: ['holdings.component.css']
+ styleUrls: ['holdings.component.css'],
+ encapsulation: ViewEncapsulation.None
})
export class HoldingsMaintenanceComponent implements OnInit {
commit 0ef978c6d5f1f7eeeece184d00ec76c80710d9bd
Author: Dan Wells <dbw2 at calvin.edu>
Date: Wed May 29 12:55:48 2019 -0400
LP#1823367 Tone down org unit row coloring
Some of the text was a little hard to see, and the overall effect of
the many colors, while attractive, was also a little distracting. In
addition, the lighter blue colors were not obviously different from
our standard selected-row-highlight blue.
This commit tries a different direction, using some mild green shades
based on the standard Evergreen green color base. They are easy to
read and still accomplish the overall goal of bringing out the org
units (a little) and the call numbers (a little more).
Signed-off-by: Dan Wells <dbw2 at calvin.edu>
Signed-off-by: Bill Erickson <berickxx at gmail.com>
Signed-off-by: Jane Sandberg <sandbej at linnbenton.edu>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css
index 61b04cd3e2..a5dbf13af6 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css
@@ -6,36 +6,24 @@ the CSS we have defined for different row types
See https://v2.angular.io/docs/ts/latest/guide/component-styles.html
*/
-/* grid row colors are bootstrap class="bg-info" with opacity */
-
/*
:host /deep/ .holdings-copy-row {
}
*/
-:host /deep/ .holdings-volume-row {
- color: #004085;
- background-color: rgb(23,162,184,0.2);
-}
-
-:host /deep/ .holdings-org-row-0 {
- color: #004085;
- background-color: rgb(23,162,184);
-}
+/* colors are based on "Evergreen Green", tinted and desaturated */
-:host /deep/ .holdings-org-row-1 {
- color: #004085;
- background-color: rgb(23,162,184,0.8);
-}
-
-:host /deep/ .holdings-org-row-2 {
- color: #004085;
- background-color: rgb(23,162,184,0.6);
+:host /deep/ .holdings-volume-row {
+ background-color: #c9efe4;
}
-:host /deep/ .holdings-org-row-3 {
- color: #004085;
- background-color: rgb(23,162,184,0.4);
+:host /deep/ .holdings-org-row {
+ color: rgba(0, 0, 0, .8);
+ background-color: #e1efeb;
}
-/* Add additional classes for more deeply nested org unit hierarchies */
\ No newline at end of file
+/* Add additional classes for more deeply nested org unit hierarchies */
+/* e.g.
+:host /deep/ .holdings-org-row-0 {}
+:host /deep/ .holdings-org-row-1 {}
+*/
-----------------------------------------------------------------------
Summary of changes:
Open-ILS/src/eg2/STYLE_GUIDELINES.adoc | 42 +++++++++++++++++++++
.../staff/catalog/record/holdings.component.css | 44 ++++++----------------
.../app/staff/catalog/record/holdings.component.ts | 6 ++-
.../app/staff/catalog/search-form.component.css | 4 +-
.../app/staff/catalog/search-form.component.html | 2 +-
5 files changed, 61 insertions(+), 37 deletions(-)
create mode 100644 Open-ILS/src/eg2/STYLE_GUIDELINES.adoc
hooks/post-receive
--
Evergreen ILS
More information about the open-ils-commits
mailing list