event-logs: redesign search and filtering function
Proposed changes were based on user feedback from design team.
Change-Id: Idab1418e1b4d11770095c865eb03769f278a03bc
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index d104c08..affd094 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -34,6 +34,12 @@
// Dropdowns
$dropdown__focus-bg: #e6e9ee;
+// Status colors
+$error-color: #e62425;
+$status-ok: #34bc6e;
+$status-ok-light: #bcefce;
+$status-warn: #ffb000;
+
// Alerts
$alert__error: rgb(230, 35, 37);
$alert__warning: rgb(255, 127, 0);
@@ -63,9 +69,4 @@
$nav__top-level-color: #1a273b;
$nav__second-level-color: #e6e9ed;
-// Status colors
-$error-color: #e62425;
-$status-ok: #34bc6e;
-$status-ok-light: #bcefce;
-$status-warn: #ffb000;
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index f4be1b1..e101385 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -1,14 +1,15 @@
// Drop downs
.dropdown__button {
position: relative;
- padding: 1em;
+ padding: .5em .8em;
margin-top: -10px;
+ border: 1px solid $lightgrey;
&.active,
&:hover {
background: $dropdown__focus-bg;
}
&:after {
- content: '\276F';
+ content: '\25B8';
display: inline-block;
margin-left: 5px;
font-size: .8em;
@@ -20,7 +21,6 @@
.dropdown__wrapper {
position: relative;
display: inline-block;
- float: left;
}
.dropdown__list {
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index 800dd98..fe67af2 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -5,18 +5,16 @@
width: 100%;
max-width: 99%;
display: inline-block;
+ float: left;
position: relative;
margin-right: 1em;
margin-top: .5em;
- @media (min-width: 1333px) {
- max-width: 60%;
- margin-top: 0;
- }
+ margin-bottom: 1em;
#content__search-input {
margin: 0;
- border: 0;
- border-bottom: 2px solid $lightgrey;
+ border: 1px solid $lightgrey;
padding-left: 40px;
+ padding-right: 5px;
&:focus {
box-shadow: none;
}
@@ -33,15 +31,18 @@
opacity: .6;
}
- #event__search-submit {
+ #content__search-submit {
position: absolute;
+ display: inline-block;
+ width: 100px;
top: .5em;
- right: 0;
- padding: 8px;
+ right: 5px;
+ padding: 1em 2em;
min-height: 20px;
- max-width: 70px;
text-align: center;
margin: 0;
+ font-weight: 700;
+ font-size: .8em;
}
.tag-filter-label {
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 909236d..d0208ac 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -3,7 +3,6 @@
@import "toggle-filter";
@import "status";
@import "alerts";
-@import "tags";
@import "inline-confirm";
@import "accordion";
@import "content-search";
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index 4eae9e8..d50f125 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -1,5 +1,6 @@
// toggle buttons for filtering
.toggle-filter {
+ margin-top: 12px;
.filter-label {
color: darken($lightgrey, 10%);
text-transform: uppercase;
diff --git a/app/overview/controllers/log-controller.html b/app/overview/controllers/log-controller.html
index 3d3e149..4d3dcf7 100644
--- a/app/overview/controllers/log-controller.html
+++ b/app/overview/controllers/log-controller.html
@@ -22,99 +22,70 @@
</section>
<!-- Filters -->
<section class="row column">
- <!-- filters -->
- <div class="event-log__filters">
- <!-- severity filter -->
- <div class="dropdown__wrapper">
- <button class="dropdown__button" ng-click="severityFilter = severityFilter == true ? false : true;"
- ng-class="{'active' : severityFilter}">All Severity
- </button>
- <ul class="dropdown__list multi-select inline" ng-show="severityFilter">
- <li>
- <button>All severity (999)</button>
- </li>
- <li ng-click="dropdown_selectedHigh = !dropdown_selectedHigh; filterHigh = !filterHigh "
- ng-class="{'active' : dropdown_selectedHigh, 'active' : filterHigh}">
- <button>High severity (999)</button>
- </li>
- <li ng-click="dropdown_selectedMed = !dropdown_selectedMed; filterMed = !filterMed"
- ng-class="{'active' : dropdown_selectedMed, 'active' : filterMed}">
- <button>Medium severity (999)</button>
- </li>
- <li ng-click="dropdown_selectedLow = !dropdown_selectedLow; filterLow = !filterLow"
- ng-class="{'active' : dropdown_selectedLow, 'active' : filterLow}">
- <button>Low severity (999)</button>
- </li>
- </ul>
- </div>
- <!-- date range -->
- <div class="dropdown__wrapper">
- <button class="dropdown__button" ng-click="dateFilter = dateFilter == true ? false : true;"
- ng-class="{'active' : dateFilter}">Date Range
- </button>
- <div class="dropdown__list dropdown__date row" ng-show="dateFilter">
- <div class="column small-6">
- <label>Start Date</label>
- <input type="date"/>
- </div>
- <div class="column small-6">
- <label>End Date</label>
- <input type="date"/>
- </div>
- </div>
- </div>
- <!-- Status filter -->
- <div class="dropdown__wrapper">
- <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
- ng-class="{'active' : statusFilter}">Status
- </button>
- <ul class="dropdown__list multi-select inline" ng-show="statusFilter">
- <li>
- <button>All status (999)</button>
- </li>
- <li ng-click="dropdown_selectedResolved = !dropdown_selectedResolved; filterResolved = !filterResolved"
- ng-class="{'active' : dropdown_selectedResolved, 'active' : filterResolved}">
- <button>Resolved issues (999)</button>
- </li>
- <li ng-click="dropdown_selectedUnresolved = !dropdown_selectedUnresolved; filterUnresolved = !filterUnresolved"
- ng-class="{'active' : dropdown_selectedUnresolved, 'active' : filterUnresolved}">
- <button>Unresolved issues (999)</button>
- </li>
- </ul>
- </div>
- </div>
<!-- search -->
<div class="content__search">
<label for="content__search-input">Event Log Search</label>
- <input id="content__search-input" type="text" placeholder="Filter issues"/>
- <input id="event__search-submit" type="submit" class="btn btn-secondary" value="Submit"/>
- <div class="event__search-tag-wrapper row"
- ng-show="filterUnresolved || filterResolved || filterHigh || filterMed || filterLow">
- <div class="column small-2 large-1 no-padding">
- <p class="inline label tag-filter-label">Filtered by: </p>
- </div>
- <div class="column small-10 large-11 ">
- <button class="tag custom">Custom Tag</button>
- <button class="tag event__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High
- priority
- </button>
- <button class="tag event__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium
- priority
- </button>
- <button class="tag event__low" ng-click="filterLow = !filterLow" ng-show="filterLow">Low priority
- </button>
- <button class="tag event__resolved" ng-click="filterUnresolved = !filterUnresolved"
- ng-show="filterUnresolved">Unresolved issues
- </button>
- <button class="tag event__resolved" ng-click="filterResolved = !filterResolved"
- ng-show="filterResolved">Resolved issues
- </button>
- </div>
+ <input id="content__search-input" type="text" placeholder="Search logs"/>
+ <input id="content__search-submit" type="submit" class="btn btn-secondary" value="Submit"/>
+ <!-- filters -->
+ <div class="event-log__filters">
+
</div>
</div>
</section> <!-- end filter -->
+
+ <section id="event-filter" class="row column">
+ <div class="inline toggle-filter">
+ <p class="filter-label">Filter by severity</p>
+ <button class="inline first" ng-click="toggleall = !toggleall"
+ ng-class="toggleall ? 'btn-primary' : 'btn-secondary'">All
+ </button>
+ <button class="inline " ng-click="togglehigh = !togglehigh"
+ ng-class="togglehigh ? 'btn-primary' : 'btn-secondary'">High
+ </button>
+ <button class="inline" ng-click="togglemed = !togglemed"
+ ng-class="togglemed ? 'btn-primary' : 'btn-secondary'">Medium
+ </button>
+ <button class="inline last" ng-click="togglelow = !togglelow"
+ ng-class="togglelow ? 'btn-primary' : 'btn-secondary'">Low
+ </button>
+ </div>
+ <div class="inline event__date-filter">
+ <p class="filter-label">Filter by date range (MM/DD/YYYY)</p>
+ <div class="inline">
+ <label for="event-filter-start-date">Start Date</label>
+ <input id="event-filter-start-date" type="date" placeholder="MM/DD/YYYY" />
+ </div>
+ <strong>–</strong>
+ <div class="inline">
+ <label for="event-filter-end-date">End Date</label>
+ <input id="event-filter-end-date" type="date" placeholder="MM/DD/YYYY"/>
+ </div>
+ </div>
+ <div class="inline event__status-filter">
+ <p class="filter-label">Filter by issue status</p>
+ <!-- Status filter -->
+ <div class="dropdown__wrapper">
+ <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
+ ng-class="{'active' : statusFilter}">Unresolved issues
+ </button>
+ <ul class="dropdown__list inline" ng-show="statusFilter">
+ <li>
+ <button>All issues</button>
+ </li>
+ <li>
+ <button>Resolved issues</button>
+ </li>
+ <li>
+ <button>Unresolved issues</button>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </section> <!-- end filter -->
+
<section id="event-log__events" class="row column">
- <div id="header__actions-bar" class="row ">
+ <div class="row header__actions-bar">
<div class="column small-1 large-1 event-log__col-check">
<label class="control-check">
<input type="checkbox" name="events__check-all" ng-model="all"/>
@@ -137,17 +108,17 @@
<!-- when logs are selected, this text changes to show how many logs are checked -->
<div class="event__actions">
<button class="inline btn-delete" ng-show="event || all" ng-click="confirm= ! confirm">
- <img class="event__icon" src="assets/images/icon-trashcan.svg" alt="">Delete
+ <img class="event__icon" src="assets/images/icon-trashcan-white.svg" alt="">Delete
</button>
<button class="inline btn-resolve" ng-show="event || all">
- <img class="event__icon" src="assets/images/icon-checklist.svg" alt="">Mark as resolved
+ <img class="event__icon" src="assets/images/icon-checklist-white.svg" alt="">Mark as resolved
</button>
<button class="inline btn-export">Export</button>
</div>
</div>
</div>
<!-- EVENT -->
- <div class="row column event-log__single-event"
+ <div class="row column event-log__single-event accord-row"
ng-class="{'active': event__metadatarow, 'selected': event__selected}">
<div class="row">
<div class="inline__confirm" ng-class="{active: eventConfirm}">
@@ -246,7 +217,7 @@
</div>
</div>
<!-- EVENT -->
- <div class="row column event-log__single-event"
+ <div class="row column event-log__single-event accord-row"
ng-class="{'active': event__metadatarow_2, 'selected': event__selected_2}">
<div class="row">
<div class="inline__confirm" ng-class="{active: eventConfirm2}">
@@ -331,7 +302,7 @@
</div>
</div>
<!-- EVENT -->
- <div class="row column event-log__single-event" ng-class="{'active': event__metadatarow_1}">
+ <div class="row column event-log__single-event accord-row" ng-class="{'active': event__metadatarow_1}">
<div class="row">
<div class="column small-1 large-2 event-log__col-check">
<label class="control-check">
@@ -403,7 +374,7 @@
</div>
</div>
<!-- EVENT -->
- <div class="row column event-log__single-event">
+ <div class="row column event-log__single-event accord-row">
<div class="row">
<div class="column small-1 large-2 event-log__col-check">
<label class="control-check">
diff --git a/app/overview/styles/log.scss b/app/overview/styles/log.scss
index 7c30762..afe773d 100644
--- a/app/overview/styles/log.scss
+++ b/app/overview/styles/log.scss
@@ -21,10 +21,6 @@
color: $darkbg__accent;
}
}
- .row {
- //padding: 0;
- margin-left: 0;
- }
// Dropwdowns filter
.dropdown__date.row {
@@ -39,8 +35,60 @@
color: $lightbg__primary;
font-size: .9em;
font-weight: 700;
+ border: 0;
}
+ .content__search {
+ @include mediaQuery(x-large) {
+ max-width: 61%;
+ @include fastTransition-all;
+ }
+ }
+}
+
+#event-filter {
+ .filter-label {
+ color: darken($lightgrey, 10%);
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: .75em;
+ margin-bottom: 3px;
+ }
+ .event__severity-filter {
+ margin-right: 2em;
+ margin-bottom: 1em;
+ button {
+ margin: 3px -3px;
+ padding: .6em 2em;
+ min-height: 2.1em;
+ font-size: .9em;
+ font-weight: 700;
+ border-radius: 0;
+ &.first,
+ &.last {
+ border-radius: 3px;
+ }
+ &.last {
+ border-left: 0;
+ }
+ }
+ .btn-primary {
+ border: 2px solid $primebtn__bg;
+ }
+
+ }
+ .event__date-filter {
+ margin-right: 1.5em;
+ color: $darkgrey;
+ input {
+ width: 170px;
+ height: 2.1rem;
+ }
+ label {
+ height: 0;
+ text-indent: -999px;
+ }
+ }
}
.event-log__filters {
@@ -55,6 +103,10 @@
}
// Event Log Events
+#event-log__events.row {
+ padding-left: 0;
+ padding-right: 0;
+}
#event-log__events {
display: block;
margin-top: 1.6em;
@@ -62,6 +114,13 @@
position: relative;
overflow: hidden;
+ .header__actions-bar {
+ .btn-export,
+ .btn-delete,
+ .btn-resolve {
+ color: $white;
+ }
+ }
.inline__confirm {
height: auto;
margin-left: 0;
@@ -99,7 +158,7 @@
.btn-delete,
.btn-resolve {
text-transform: capitalize;
- color: $black;
+ color: black;
font-size: .9em;
font-weight: 700;
position: relative;
@@ -132,18 +191,8 @@
// Single event log card
.event-log__single-event {
- position: relative;
border-top: 1px solid $lightgrey;
- padding: 1em 1em 1em 0em;
- background: $lightblue;
- overflow: hidden;
- &.active,
- &.selected {
- background: $white;
- }
- &:hover {
- background: $white;
- }
+ padding: 1em 1em 1em .7em;
}
.event-log__event-info {