ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-16 09:33:16 +02:00
Code Issues Releases Wiki Activity

Merge pull request #203 from ascribe/upgrade-react-styling

Browse Source 
Fix styles for react upgrade
This commit is contained in:
Brett Sun 2016-06-13 11:52:24 +02:00 committed by GitHub
commit d378ecb0f3
17 changed files with 640 additions and 575 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget'; import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget'; import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
@ -43,30 +44,26 @@ let PieceListToolbar = React.createClass({
const { className, children, searchFor, searchQuery } = this.props; const { className, children, searchFor, searchQuery } = this.props;
return ( return (
<div className={className}> <div className={classNames('row', className)}>
<div className="row"> <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-piece-list-toolbar">
<div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"> <span className="pull-left">
<div className="row"> {children}
<span className="pull-left"> </span>
{children} <span className="pull-right">
</span> <PieceListToolbarOrderWidget
<span className="pull-right"> orderParams={this.props.orderParams}
<PieceListToolbarOrderWidget orderBy={this.props.orderBy}
orderParams={this.props.orderParams} applyOrderBy={this.props.applyOrderBy}/>
orderBy={this.props.orderBy} <PieceListToolbarFilterWidget
applyOrderBy={this.props.applyOrderBy}/> filterParams={this.props.filterParams}
<PieceListToolbarFilterWidget filterBy={this.props.filterBy}
filterParams={this.props.filterParams} applyFilterBy={this.props.applyFilterBy} />
filterBy={this.props.filterBy} </span>
applyFilterBy={this.props.applyFilterBy} /> <SearchBar
</span> className="pull-right search-bar ascribe-input-glyph"
<SearchBar searchFor={searchFor}
className="pull-right search-bar ascribe-input-glyph" searchQuery={searchQuery}
searchFor={searchFor} threshold={AppConstants.searchThreshold}/>
searchQuery={searchQuery}
threshold={AppConstants.searchThreshold}/>
</div>
</div>
</div> </div>
</div> </div>
); );

1
js/components/header.js
View File

@ -192,6 +192,7 @@ let Header = React.createClass({
<Navbar.Brand> <Navbar.Brand>
{this.getLogo()} {this.getLogo()}
</Navbar.Brand> </Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header> </Navbar.Header>
<Navbar.Collapse <Navbar.Collapse
eventKey={0}> eventKey={0}>

5
js/components/header_notifications.js
View File

@ -97,7 +97,7 @@ let HeaderNotifications = React.createClass({
} }
return ( return (
<Nav navbar pullRight> <Nav navbar pullRight className="notification-menu">
<DropdownButton <DropdownButton
ref='dropdownButton' ref='dropdownButton'
id="header-notification-dropdown" id="header-notification-dropdown"
@ -107,8 +107,7 @@ let HeaderNotifications = React.createClass({
<Glyphicon glyph='envelope' color="green"/> <Glyphicon glyph='envelope' color="green"/>
<span className="notification-amount">({numNotifications})</span> <span className="notification-amount">({numNotifications})</span>
</span> </span>
} }>
className="notification-menu">
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })} {this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })} {this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
</DropdownButton> </DropdownButton>

1
js/components/piece_list.js
View File

@ -290,7 +290,6 @@ const PieceList = React.createClass({
return ( return (
<div> <div>
<PieceListToolbar <PieceListToolbar
className="ascribe-piece-list-toolbar"
searchFor={this.searchFor} searchFor={this.searchFor}
searchQuery={this.state.search} searchQuery={this.state.search}
filterParams={filterParams} filterParams={filterParams}

134
sass/ascribe_custom_style.scss
View File

@ -17,132 +17,6 @@ hr {
border-top: 1px solid $ascribe-blue-border; border-top: 1px solid $ascribe-blue-border;
} }
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
border-color: transparent;
}
.navbar-default {
background-color: $ascribe--nav-bg-color;
box-shadow: 0 0 1px rgba(0,0,0,.1),
0 1px 2px rgba(0,0,0,.2);
.navbar-nav > li > a,
.navbar-nav > li > .active a {
text-transform: uppercase;
font-size: 12px;
font-weight: $ascribe--font-weight-light;
color: $ascribe--nav-fg-prim-color;
border-bottom: 3px solid transparent;
}
.navbar-nav > li > a:hover {
color: $ascribe--nav-fg-sec-color;
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $ascribe--nav-fg-prim-color;
border-bottom-color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color;
font-weight: $ascribe--font-weight-light;
}
.navbar-nav > .active {
background-color: $ascribe--nav-bg-color;
}
.navbar-nav > .open > a,
.dropdown-menu > .active > a {
color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: rgba($ascribe--button-default-color, .05);
}
.dropdown-menu {
background-color: $ascribe--nav-bg-color;
}
.navbar-nav > li > .dropdown-menu {
padding: 0;
}
.dropdown-menu > li > a {
color: $ascribe--nav-fg-prim-color;
font-weight: $ascribe--font-weight-light;
padding-bottom: 9px;
padding-top: 9px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: rgba($ascribe--button-default-color, .05);
}
.dropdown-menu > .divider {
margin: 0;
}
.notification-menu {
.dropdown-menu {
background-color: white;
li:hover {
background-color: $ascribe-white;
}
}
.notification-action{
color: $ascribe-pink;
}
}
.navbar-brand {
font-size: 23px;
padding: 12px 15px;
.icon-ascribe-logo {
color: $ascribe--nav-fg-prim-color;
&:hover {
color: $ascribe--nav-fg-sec-color;
text-decoration: none;
}
&:focus {
text-decoration: none;
}
}
.img-brand {
height: 100%;
}
}
.img-brand .navbar-brand {
width: 0;
height: 0;
padding-right: 120px;
padding-bottom: 36px;
padding-left: 30px;
background: transparent no-repeat center 4px;
background-size: 150px;
margin-bottom: 0;
position: relative;
}
.navbar-toggle .icon-bar {
background-color: $ascribe--nav-fg-prim-color;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $ascribe--nav-bg-color;
}
}
.ascribe-icon { .ascribe-icon {
font-size: 1.2em; font-size: 1.2em;
font-weight: $ascribe--font-weight-light; font-weight: $ascribe--font-weight-light;
@ -367,14 +241,6 @@ fieldset[disabled] .btn-secondary.active {
} }
} }
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .btn-default.dropdown-toggle.dropdown-toggle {
background-color: darken($ascribe--button-secondary-fg-color, 20%);
border-color: darken($ascribe--button-secondary-fg-color, 20%);
}
.pager li > a, .pager li > a,
.pager li > span { .pager li > span {
background-color: $ascribe--button-default-color; background-color: $ascribe--button-default-color;

139
sass/ascribe_navbar.scss
View File

@ -1,4 +1,7 @@
.navbar-default { .navbar-default {
background-color: $ascribe--nav-bg-color;
box-shadow: 0 0 1px rgba(0,0,0,.1),
0 1px 2px rgba(0,0,0,.2);
border: 0; border: 0;
border-color: #ccc; border-color: #ccc;
border-left: 0; border-left: 0;
@ -6,8 +9,142 @@
border-top: 0; border-top: 0;
font-size: .8em; font-size: .8em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
// All Navbar buttons
.navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
background-color: transparent;
border: none;
border-bottom: 3px solid transparent;
box-shadow: none;
color: $ascribe--nav-fg-prim-color;
font-size: 12px;
font-weight: $ascribe--font-weight-light;
line-height: 20px;
padding: 15px;
text-transform: uppercase;
&:focus,
&:hover {
background-color: transparent;
color: $ascribe--nav-fg-sec-color;
}
}
// Currently active route
.navbar-nav > li.active > a {
background-color: transparent;
border-bottom-color: $ascribe--nav-fg-prim-color;
&:focus,
&:hover {
background-color: transparent;
color: $ascribe--nav-fg-prim-color;
}
}
// Open dropdowns
.navbar-nav .open {
.dropdown-toggle.btn {
&:focus,
&:hover {
background-color: rgba($ascribe--button-default-color, .05);
color: $ascribe--nav-fg-prim-color;
}
}
.dropdown-menu {
margin: 0;
padding: 0;
}
.dropdown-menu a {
color: $ascribe--nav-fg-prim-color;
font-weight: $ascribe--font-weight-light;
padding-bottom: 9px;
padding-top: 9px;
}
}
.dropdown-menu > .divider {
margin: 0;
}
.notification-menu {
.dropdown-toggle.btn:focus,
.dropdown-toggle.btn:hover {
box-shadow: none;
}
}
.navbar-brand {
font-size: 23px;
padding: 12px 15px;
.icon-ascribe-logo {
color: $ascribe--nav-fg-prim-color;
&:focus,
&:hover {
color: $ascribe--nav-fg-sec-color;
text-decoration: none;
}
&:focus {
text-decoration: none;
}
}
.img-brand {
height: 100%;
}
}
.navbar-toggle {
.icon-bar {
background-color: $ascribe--nav-fg-prim-color;
}
&:hover,
&:focus {
background-color: $ascribe--nav-bg-color;
}
}
/* For mobile toggled menu */
@media (max-width: 767px) {
.navbar-collapse {
padding-left: 0;
padding-right: 0;
}
.navbar-nav {
margin-left: 0;
}
.navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
display: block;
padding-bottom: 10px;
padding-top: 10px;
text-align: left;
}
.navbar-nav .open .dropdown-menu > li > a {
padding: 5px 15px 5px 25px;
}
.navbar-nav .dropdown {
display: block;
}
}
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
border-color: transparent;
} }
.navbar-right { .navbar-right {
margin-right: 0; margin-right: 0;
} }

29
sass/ascribe_notification_list.scss
View File

@ -1,7 +1,3 @@
$break-small: 764px;
$break-medium: 991px;
$break-medium: 1200px;
.notification-header, .notification-wrapper { .notification-header, .notification-wrapper {
min-width: 350px; min-width: 350px;
width: 100%; width: 100%;
@ -47,27 +43,26 @@ $break-medium: 1200px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.sub-header{ .sub-header {
margin-bottom: 0.6em; margin-bottom: 0.6em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.notification-action{ .notification-action {
color: $ascribe-dark-blue; color: $ascribe-pink;
} }
} }
.notification-menu { .notification-menu .dropdown-menu {
.dropdown-menu { background-color: white;
padding: 0 !important; border-top: 0;
li a { max-height: 70vh;
padding-top: 0; overflow-y: auto;
} overflow-x: hidden;
border-top: 0;
overflow-y: auto; li:hover {
overflow-x: hidden; background-color: $ascribe-white;
max-height: 70vh;
} }
} }

50
sass/ascribe_piece_list_toolbar.scss
View File

@ -1,8 +1,3 @@
.ascribe-piece-list-toolbar {
padding-left: 15px;
padding-right: 15px;
}
.search-bar { .search-bar {
max-width: 200px; max-width: 200px;
@ -29,42 +24,31 @@
} }
} }
.ascribe-piece-list-toolbar-widget { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
button { background-color: transparent;
background-color: transparent; border: 1px solid transparent;
border: 1px solid transparent; box-shadow: none;
color: $ascribe--button-default-color; color: $ascribe--button-default-color;
padding: 6px 4px 6px 8px; padding: 6px 4px 6px 8px;
&:hover, .open &,
&:active { &:hover,
background-color: $ascribe--button-default-color !important; &:active {
border-color: $ascribe--button-default-color !important; background-color: $ascribe--button-default-color !important;
color: white; border-color: $ascribe--button-default-color !important;
} color: white;
.caret {
display: none;
}
} }
.caret {
.ascribe-piece-list-toolbar-widget-item { display: none;
a {
padding-left: 0;
padding-right: 0;
}
} }
}
.ascribe-piece-list-toolbar-widget-item {
.checkbox-line { .checkbox-line {
height: 25px; height: 25px;
position: relative; position: relative;
color: #333333; color: #333333;
/* Fuck you react-bootstrap */
&:hover {
background-color: $dropdown-link-hover-bg;
cursor: pointer;
}
span { span {
cursor: pointer; cursor: pointer;
left: 9px; left: 9px;
@ -81,7 +65,7 @@
} }
} }
.dropdown-menu { .dropdown-menu & {
min-width: 170px; min-width: 170px;
} }
} }

127
sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
View File

@ -2,11 +2,11 @@
$vivi23--fg-color: black; $vivi23--fg-color: black;
$vivi23--bg-color: white; $vivi23--bg-color: white;
$vivi23--nav-fg-prim-color: $vivi23--fg-color; $vivi23--nav-fg-prim-color: $vivi23--fg-color;
$vivi23--nav-fg-sec-color: #2882fa; $vivi23--nav-fg-sec-color: #3a3a3a;
$vivi23--nav-bg-color: $vivi23--bg-color; $vivi23--nav-bg-color: $vivi23--bg-color;
$vivi23--nav-highlight-color: #f8f8f8; $vivi23--nav-highlight-color: #f8f8f8;
$vivi23--button-default-color: $vivi23--fg-color; $vivi23--button-default-color: $vivi23--fg-color;
$vivi23--highlight-color: #2882fa; $vivi23--highlight-color: #de2600;
.client--23vivi { .client--23vivi {
@ -53,69 +53,40 @@ $vivi23--highlight-color: #2882fa;
/** Navbar **/ /** Navbar **/
.navbar-default { .navbar-default {
background-color: $vivi23--nav-fg-prim-color; background-color: $vivi23--nav-fg-prim-color;
.navbar-brand .icon-ascribe-logo {
color: $vivi23--bg-color;
&:hover {
color: darken($vivi23--bg-color, 20%);
}
}
} }
.navbar-nav > li > a, .navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a:focus, .navbar-nav > li > a {
.navbar-nav > li > .active a,
.navbar-nav > li > .active a:focus {
color: $vivi23--nav-bg-color; color: $vivi23--nav-bg-color;
&:focus,
&:hover {
color: darken($vivi23--nav-bg-color, 20%);
}
} }
.navbar-nav > li > a:hover { .navbar-nav > li.active > a {
color: darken($vivi23--nav-bg-color, 20%);
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
background-color: $vivi23--nav-fg-prim-color; background-color: $vivi23--nav-fg-prim-color;
border-bottom-color: $vivi23--nav-bg-color; border-bottom-color: $vivi23--nav-bg-color;
color: $vivi23--nav-bg-color; color: $vivi23--nav-bg-color;
}
.navbar-nav > .open > a, &:focus,
.dropdown-menu > .active > a, &:hover {
.dropdown-menu > li > a { color: $vivi23--nav-bg-color;
color: $vivi23--nav-fg-prim-color;
background-color: $vivi23--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($vivi23--nav-fg-prim-color, 20%);
background-color: $vivi23--nav-highlight-color;
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.in {
background-color: $vivi23--nav-bg-color;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
background-color: $vivi23--nav-highlight-color;
} }
} }
.navbar-collapse.collapsing li a, .navbar-nav .open {
.navbar-collapse.collapse.in li a { .dropdown-toggle.btn {
color: $vivi23--nav-fg-prim-color; background-color: $vivi23--nav-bg-color;
} color: $vivi23--nav-fg-prim-color;
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
color: lighten($vivi23--nav-fg-prim-color, 20%); &:focus,
background-color: $vivi23--nav-highlight-color; &:hover {
background-color: $vivi23--nav-highlight-color;
color: lighten($vivi23--nav-fg-prim-color, 20%);
}
}
} }
.navbar-toggle { .navbar-toggle {
@ -124,15 +95,15 @@ $vivi23--highlight-color: #2882fa;
.icon-bar { .icon-bar {
background-color: $vivi23--highlight-color; background-color: $vivi23--highlight-color;
} }
}
.navbar-toggle:hover, &:focus,
.navbar-toggle:focus { &:hover {
border-color: lighten($vivi23--highlight-color, 10%); border-color: lighten($vivi23--highlight-color, 10%);
background-color: $vivi23--nav-fg-prim-color; background-color: $vivi23--nav-fg-prim-color;
.icon-bar { .icon-bar {
background-color: lighten($vivi23--highlight-color, 10%); background-color: lighten($vivi23--highlight-color, 10%);
}
} }
} }
@ -152,6 +123,40 @@ $vivi23--highlight-color: #2882fa;
} }
} }
/* For mobile toggled menu */
@media (max-width: 767px) {
.navbar-collapse {
background-color: $vivi23--nav-bg-color;
}
.navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
color: $vivi23--nav-fg-prim-color;
&:hover {
background-color: $vivi23--nav-highlight-color;
color: lighten($vivi23--nav-fg-prim-color, 20%);
}
}
.navbar-nav .open .dropdown-menu > li > a {
color: $vivi23--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $vivi23--nav-highlight-color;
color: $vivi23--nav-fg-prim-color;
}
}
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus, {
background-color: $vivi23--nav-highlight-color;
color: lighten($vivi23--nav-fg-prim-color, 20%);
}
}
/** Buttons **/ /** Buttons **/
// reset disabled button styling for btn-default // reset disabled button styling for btn-default
.btn-default.disabled, .btn-default.disabled,
@ -261,7 +266,7 @@ $vivi23--highlight-color: #2882fa;
} }
// filter widget // filter widget
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
color: $vivi23--button-default-color !important; color: $vivi23--button-default-color !important;

126
sass/whitelabel/wallet/artcity/artcity_custom_style.scss
View File

@ -61,66 +61,47 @@ $artcity--ter-highlight-color: #EDEDF0;
.navbar-brand .icon-ascribe-logo { .navbar-brand .icon-ascribe-logo {
color: $artcity--nav-fg-prim-color; color: $artcity--nav-fg-prim-color;
&:focus,
&:hover { &:hover {
color: darken($artcity--nav-fg-prim-color, 20%); color: darken($artcity--nav-fg-prim-color, 20%);
} }
} }
} }
.navbar-nav > li > a, .navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a:focus, .navbar-nav > li > a {
.navbar-nav > li > .active a,
.navbar-nav > li > .active a:focus {
color: $artcity--nav-fg-prim-color; color: $artcity--nav-fg-prim-color;
}
.navbar-nav > li > a:hover { &:focus,
color: darken($artcity--nav-fg-prim-color, 20%); &:hover {
} color: darken($artcity--nav-fg-prim-color, 20%);
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
background-color: $artcity--nav-bg-color;
border-bottom-color: $artcity--nav-fg-prim-color;
color: $artcity--nav-fg-prim-color;
}
.navbar-nav > .open > a,
.dropdown-menu > .active > a,
.dropdown-menu > li > a {
color: $artcity--nav-fg-prim-color;
background-color: $artcity--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($artcity--nav-fg-prim-color, 20%);
background-color: $artcity--nav-highlight-color;
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.in {
background-color: $artcity--nav-bg-color;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
background-color: $artcity--nav-highlight-color;
} }
} }
.navbar-collapse.collapsing li a, .navbar-nav > li.active > a {
.navbar-collapse.collapse.in li a { background-color: $artcity--nav-bg-color;
border-bottom-color: $artcity--nav-fg-prim-color;
color: $artcity--nav-fg-prim-color; color: $artcity--nav-fg-prim-color;
&:focus,
&:hover {
color: $artcity--nav-fg-prim-color;
}
} }
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
color: lighten($artcity--nav-fg-prim-color, 20%); .navbar-nav .open {
background-color: $artcity--nav-highlight-color; .dropdown-toggle.btn,
.dropdown-menu a {
color: $artcity--nav-fg-prim-color;
background-color: $artcity--nav-bg-color;
&:focus,
&:hover {
background-color: $artcity--nav-highlight-color;
color: lighten($artcity--nav-fg-prim-color, 20%);
}
}
} }
.navbar-toggle { .navbar-toggle {
@ -129,15 +110,15 @@ $artcity--ter-highlight-color: #EDEDF0;
.icon-bar { .icon-bar {
background-color: $artcity--highlight-color; background-color: $artcity--highlight-color;
} }
}
.navbar-toggle:hover, &:focus,
.navbar-toggle:focus { &:hover {
border-color: lighten($artcity--highlight-color, 10%); background-color: $artcity--nav-fg-prim-color;
background-color: $artcity--nav-fg-prim-color; border-color: lighten($artcity--highlight-color, 10%);
.icon-bar { .icon-bar {
background-color: lighten($artcity--highlight-color, 10%); background-color: lighten($artcity--highlight-color, 10%);
}
} }
} }
@ -157,6 +138,41 @@ $artcity--ter-highlight-color: #EDEDF0;
} }
} }
/* For mobile toggled menu */
@media (max-width: 767px) {
.navbar-collapse {
background-color: $artcity--nav-bg-color;
}
.navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
color: $artcity--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $artcity--nav-highlight-color;
color: lighten($artcity--nav-fg-prim-color, 20%);
}
}
.navbar-nav .open .dropdown-menu > li > a {
color: $artcity--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $artcity--nav-highlight-color;
color: $artcity--nav-fg-prim-color;
}
}
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus, {
background-color: $artcity--nav-highlight-color;
color: lighten($artcity--nav-fg-prim-color, 20%);
}
}
/** Buttons **/ /** Buttons **/
// reset disabled button styling for btn-default // reset disabled button styling for btn-default
.btn-default.disabled, .btn-default.disabled,
@ -286,7 +302,7 @@ $artcity--ter-highlight-color: #EDEDF0;
} }
// filter widget // filter widget
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
color: $artcity--button-default-color !important; color: $artcity--button-default-color !important;

78
sass/whitelabel/wallet/cc/cc_custom_style.scss
View File

@ -8,50 +8,64 @@ $cc--button-color: $cc--nav-fg-prim-color;
box-shadow: none; box-shadow: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
} }
.navbar-nav > li > a,
.navbar-nav > li > .active a { .navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
color: $cc--nav-fg-prim-color; color: $cc--nav-fg-prim-color;
background-color: $cc--nav-bg-color; background-color: $cc--nav-bg-color;
&:focus,
&:hover {
color: lighten($cc--nav-fg-prim-color, 40%);
}
} }
.navbar-nav > li > a:hover {
color: lighten($cc--nav-fg-prim-color, 40%); .navbar-nav > li.active > a {
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $cc--nav-fg-prim-color; color: $cc--nav-fg-prim-color;
border-bottom-color: $cc--nav-fg-prim-color; border-bottom-color: $cc--nav-fg-prim-color;
background-color: $cc--nav-bg-color; background-color: $cc--nav-bg-color;
&:focus,
&:hover {
color: $cc--nav-fg-prim-color;
}
} }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { .navbar-nav .open {
color: lighten($cc--nav-fg-prim-color, 40%); .dropdown-toggle.btn {
background-color: $cc--nav-bg-color; background-color: $cc--nav-bg-color;
} color: lighten($cc--nav-fg-prim-color, 40%);
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover, &:focus,
.navbar-nav > .open > a:focus, &:hover {
.dropdown-menu > .active > a, background-color: $cc--nav-bg-color;
.dropdown-menu > .active > a:hover, color: lighten($cc--nav-fg-prim-color, 40%);
.dropdown-menu > .active > a:focus { }
color: lighten($cc--nav-fg-prim-color, 40%); }
background-color: $cc--nav-bg-color;
.dropdown-menu a {
color: $cc--nav-fg-prim-color;
&:focus,
&:hover {
color: lighten($cc--nav-fg-prim-color, 40%);
}
}
} }
.dropdown-menu { .dropdown-menu {
background-color: $cc--nav-bg-color; background-color: $cc--nav-bg-color;
} }
.dropdown-menu > li > a { .navbar-toggle {
color: $cc--nav-fg-prim-color; .icon-bar {
} background-color: $cc--nav-fg-prim-color;
}
.navbar-toggle .icon-bar { &:focus,
background-color: $cc--nav-fg-prim-color; &:hover {
} background-color: $cc--nav-bg-color;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $cc--nav-bg-color;
} }
} }
@ -111,7 +125,7 @@ $cc--button-color: $cc--nav-fg-prim-color;
// thought of the day: // thought of the day:
// "every great atrocity is the result of people just following orders" // "every great atrocity is the result of people just following orders"
.client--cc { .client--cc {
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
color: $cc--button-color !important; color: $cc--button-color !important;
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;

79
sass/whitelabel/wallet/cyland/cyland_custom_style.scss
View File

@ -9,50 +9,65 @@ $cyland--button-sec-color: #515151;
box-shadow: none; box-shadow: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
} }
.navbar-nav > li > a,
.navbar-nav > li > .active a { .navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
color: $cyland--nav-fg-prim-color; color: $cyland--nav-fg-prim-color;
background-color: $cyland--nav-bg-color; background-color: $cyland--nav-bg-color;
&:focus,
&:hover {
color: lighten($cyland--nav-fg-prim-color, 40%);
}
} }
.navbar-nav > li > a:hover {
color: lighten($cyland--nav-fg-prim-color, 40%); .navbar-nav > li.active > a {
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $cyland--nav-fg-prim-color; color: $cyland--nav-fg-prim-color;
border-bottom-color: $cyland--nav-fg-prim-color; border-bottom-color: $cyland--nav-fg-prim-color;
background-color: $cyland--nav-bg-color; background-color: $cyland--nav-bg-color;
&:focus,
&:hover {
color: $cyland--nav-fg-prim-color;
}
} }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { .navbar-nav .open {
color: lighten($cyland--nav-fg-prim-color, 40%); .dropdown-toggle.btn {
background-color: $cyland--nav-bg-color; background-color: $cyland--nav-bg-color;
} color: lighten($cyland--nav-fg-prim-color, 40%);
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover, &:focus,
.navbar-nav > .open > a:focus, &:hover {
.dropdown-menu > .active > a, background-color: $cyland--nav-bg-color;
.dropdown-menu > .active > a:hover, color: lighten($cyland--nav-fg-prim-color, 40%);
.dropdown-menu > .active > a:focus { }
color: lighten($cyland--nav-fg-prim-color, 40%); }
background-color: $cyland--nav-bg-color;
.dropdown-menu a {
color: $cc--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $cyland--nav-bg-color;
color: lighten($cc--nav-fg-prim-color, 40%);
}
}
} }
.dropdown-menu { .dropdown-menu {
background-color: $cyland--nav-bg-color; background-color: $cyland--nav-bg-color;
} }
.dropdown-menu > li > a { .navbar-toggle {
color: $cyland--nav-fg-prim-color; .icon-bar {
} background-color: $cyland--nav-fg-prim-color;
}
.navbar-toggle .icon-bar { &:focus,
background-color: $cyland--nav-fg-prim-color; &:hover {
} background-color: $cyland--nav-bg-color;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $cyland--nav-bg-color;
} }
} }
@ -64,7 +79,7 @@ $cyland--button-sec-color: #515151;
// thought of the day: // thought of the day:
// "every great atrocity is the result of people just following orders" // "every great atrocity is the result of people just following orders"
.client--cyland { .client--cyland {
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
color: $cyland--button-color !important; color: $cyland--button-color !important;
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;

110
sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
View File

@ -23,91 +23,77 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
background-color: $ikono--bg-color; background-color: $ikono--bg-color;
box-shadow: none; box-shadow: none;
.navbar-nav > li > a, .navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > .active a { .navbar-nav > li > a {
text-transform: uppercase;
border-bottom-color: transparent; border-bottom-color: transparent;
color: white;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
.navbar-nav > li > a { .navbar-nav > li.active {
color: white;
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: black;
border-bottom-color: transparent;
background-color: transparent;
font-weight: bold;
}
.navbar-nav > .active {
background-color: white; background-color: white;
& > a {
color: black;
background-color: transparent;
border-bottom-color: transparent;
font-weight: bold;
}
} }
.navbar-toggle .icon-bar { .navbar-nav .open {
background-color: white; .dropdown-toggle.btn {
} background-color: $ikono--bg-color;
color: white;
.navbar-nav > .open > a, &:focus,
.navbar-nav > .open > a:hover, &:hover {
.navbar-nav > .open > a:focus, background-color: $ikono--bg-color;
.dropdown-menu > .active > a, color: white;
.dropdown-menu > .active > a:hover, }
.dropdown-menu > .active > a:focus { }
color: white;
background-color: $ikono--bg-color; .dropdown-menu a {
color: white;
&:focus,
&:hover {
background-color: white;
color: $ikono--bg-color;
}
}
} }
.dropdown-menu { .dropdown-menu {
background-color: $ikono--bg-color; background-color: $ikono--bg-color;
} }
.dropdown-menu > li > a { .navbar-toggle {
color: white; .icon-bar {
font-weight: bold;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: $ikono--bg-color;
background-color: white;
}
.notification-menu {
.dropdown-menu {
background-color: white; background-color: white;
li:hover { }
background-color: rgba($ikono--button-color, 0.1);
} &:focus,
&:hover {
background-color: rgba(255, 255, 255, 0.1);
} }
} }
.img-brand.navbar-brand { .notification-menu .dropdown-menu {
width: 0; background-color: white;
height: 0;
padding-right: 120px; li:hover {
padding-bottom: 36px; background-color: rgba($ikono--button-color, 0.1);
padding-left: 30px; }
background-image: url($ikono--logo);
background-color: transparent;
background-position: center 4px;
background-repeat: no-repeat;
background-size: 150px;
margin-bottom: 0;
position: relative;
} }
.navbar-toggle:hover, /* For mobile toggled menu */
.navbar-toggle:focus { @media (max-width: 767px) {
background-color: rgba(255, 255, 255, 0.1); padding-bottom: 5px;
} }
} }
.client--ikonotv { .client--ikonotv {
.route--landing, .route--landing,
.route--login, .route--login,
@ -371,7 +357,7 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
// thought of the day: // thought of the day:
// "every great atrocity is the result of people just following orders" // "every great atrocity is the result of people just following orders"
.client--ikonotv { .client--ikonotv {
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
color: $ikono--button-color !important; color: $ikono--button-color !important;
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;

126
sass/whitelabel/wallet/market/market_custom_style.scss
View File

@ -58,66 +58,47 @@ $market--highlight-color: #2882fa;
.navbar-brand .icon-ascribe-logo { .navbar-brand .icon-ascribe-logo {
color: $market--nav-fg-prim-color; color: $market--nav-fg-prim-color;
&:focus,
&:hover { &:hover {
color: darken($market--nav-fg-prim-color, 20%); color: darken($market--nav-fg-prim-color, 20%);
} }
} }
} }
.navbar-nav > li > a, .navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a:focus, .navbar-nav > li > a {
.navbar-nav > li > .active a,
.navbar-nav > li > .active a:focus {
color: $market--nav-fg-prim-color; color: $market--nav-fg-prim-color;
}
.navbar-nav > li > a:hover { &:focus,
color: darken($market--nav-fg-prim-color, 20%); &:hover {
} color: darken($market--nav-fg-prim-color, 20%);
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
background-color: $market--nav-bg-color;
border-bottom-color: $market--nav-fg-prim-color;
color: $market--nav-fg-prim-color;
}
.navbar-nav > .open > a,
.dropdown-menu > .active > a,
.dropdown-menu > li > a {
color: $market--nav-fg-prim-color;
background-color: $market--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($market--nav-fg-prim-color, 20%);
background-color: $market--nav-highlight-color;
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.in {
background-color: $market--nav-bg-color;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
background-color: $market--nav-highlight-color;
} }
} }
.navbar-collapse.collapsing li a, .navbar-nav > li.active > a {
.navbar-collapse.collapse.in li a { background-color: $market--nav-bg-color;
border-bottom-color: $market--nav-fg-prim-color;
color: $market--nav-fg-prim-color; color: $market--nav-fg-prim-color;
&:focus,
&:hover {
color: $market--nav-fg-prim-color;
}
} }
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
color: lighten($market--nav-fg-prim-color, 20%); .navbar-nav .open {
background-color: $market--nav-highlight-color; .dropdown-toggle.btn,
.dropdown-menu a {
background-color: $market--nav-bg-color;
color: $market--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $market--nav-highlight-color;
color: lighten($market--nav-fg-prim-color, 20%);
}
}
} }
.navbar-toggle { .navbar-toggle {
@ -126,15 +107,15 @@ $market--highlight-color: #2882fa;
.icon-bar { .icon-bar {
background-color: $market--highlight-color; background-color: $market--highlight-color;
} }
}
.navbar-toggle:hover, &:focus,
.navbar-toggle:focus { &:hover {
border-color: lighten($market--highlight-color, 10%); border-color: lighten($market--highlight-color, 10%);
background-color: $market--nav-fg-prim-color; background-color: $market--nav-fg-prim-color;
.icon-bar { .icon-bar {
background-color: lighten($market--highlight-color, 10%); background-color: lighten($market--highlight-color, 10%);
}
} }
} }
@ -154,6 +135,41 @@ $market--highlight-color: #2882fa;
} }
} }
/* For mobile toggled menu */
@media (max-width: 767px) {
.navbar-collapse {
background-color: $market--nav-bg-color;
}
.navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
color: $market--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $market--nav-highlight-color;
color: lighten($market--nav-fg-prim-color, 20%);
}
}
.navbar-nav .open .dropdown-menu > li > a {
color: $market--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $market--nav-highlight-color;
color: $market--nav-fg-prim-color;
}
}
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus, {
background-color: $market--nav-highlight-color;
color: lighten($market--nav-fg-prim-color, 20%);
}
}
/** Buttons **/ /** Buttons **/
// reset disabled button styling for btn-default // reset disabled button styling for btn-default
.btn-default.disabled, .btn-default.disabled,
@ -271,7 +287,7 @@ $market--highlight-color: #2882fa;
} }
// filter widget // filter widget
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
color: $market--button-default-color !important; color: $market--button-default-color !important;

123
sass/whitelabel/wallet/polline/polline_custom_style.scss
View File

@ -53,76 +53,56 @@ $polline--highlight-color: #2882fa;
.navbar-default { .navbar-default {
background-color: $polline--bg-color; background-color: $polline--bg-color;
.navbar-brand .img-brand {
height: 100%;
}
.navbar-brand { .navbar-brand {
padding: 0 5px 0 15px; padding: 0 5px 0 15px;
}
.navbar-brand .icon-ascribe-logo { .img-brand {
color: $polline--nav-fg-prim-color; height: 100%;
&:hover { }
color: darken($polline--nav-fg-prim-color, 20%);
.icon-ascribe-logo {
color: $polline--nav-fg-prim-color;
&:focus,
&:hover {
color: darken($polline--nav-fg-prim-color, 20%);
}
} }
} }
} }
.navbar-nav > li > a, .navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a:focus, .navbar-nav > li > a {
.navbar-nav > li > .active a,
.navbar-nav > li > .active a:focus {
color: $polline--nav-fg-prim-color; color: $polline--nav-fg-prim-color;
&:focus,
&:hover {
color: darken($polline--nav-fg-prim-color, 20%);
}
} }
.navbar-nav > li > a:hover { .navbar-nav > li.active > a {
color: darken($polline--nav-fg-prim-color, 20%);
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
background-color: $polline--nav-bg-color; background-color: $polline--nav-bg-color;
border-bottom-color: $polline--nav-fg-prim-color; border-bottom-color: $polline--nav-fg-prim-color;
color: $polline--nav-fg-prim-color; color: $polline--nav-fg-prim-color;
}
.navbar-nav > .open > a, &:focus,
.dropdown-menu > .active > a, &:hover {
.dropdown-menu > li > a { color: $polline--nav-fg-prim-color;
color: $polline--nav-fg-prim-color;
background-color: $polline--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($polline--nav-fg-prim-color, 20%);
background-color: $polline--nav-highlight-color;
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.in {
background-color: $polline--nav-bg-color;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
background-color: $polline--nav-highlight-color;
} }
} }
.navbar-collapse.collapsing li a, .navbar-nav .open {
.navbar-collapse.collapse.in li a { .dropdown-toggle.btn,
color: $polline--nav-fg-prim-color; .dropdown-menu a {
} color: $polline--nav-fg-prim-color;
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
color: lighten($polline--nav-fg-prim-color, 20%); &:focus,
background-color: $polline--nav-highlight-color; &:hover {
background-color: $polline--nav-highlight-color;
color: lighten($polline--nav-fg-prim-color, 20%);
}
}
} }
.navbar-toggle { .navbar-toggle {
@ -159,6 +139,41 @@ $polline--highlight-color: #2882fa;
} }
} }
/* For mobile toggled menu */
@media (max-width: 767px) {
.navbar-collapse {
background-color: $polline--nav-bg-color;
}
.navbar-nav .dropdown .dropdown-toggle.btn,
.navbar-nav > li > a {
color: $polline--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $polline--nav-highlight-color;
color: lighten($polline--nav-fg-prim-color, 20%);
}
}
.navbar-nav .open .dropdown-menu > li > a {
color: $polline--nav-fg-prim-color;
&:focus,
&:hover {
background-color: $polline--nav-highlight-color;
color: $polline--nav-fg-prim-color;
}
}
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus, {
background-color: $polline--nav-highlight-color;
color: lighten($polline--nav-fg-prim-color, 20%);
}
}
/** Buttons **/ /** Buttons **/
// reset disabled button styling for btn-default // reset disabled button styling for btn-default
.btn-default.disabled, .btn-default.disabled,
@ -276,7 +291,7 @@ $polline--highlight-color: #2882fa;
} }
// filter widget // filter widget
.ascribe-piece-list-toolbar-widget button { .ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
color: $polline--button-default-color !important; color: $polline--button-default-color !important;

38
test/gemini/tests/main/authenticated.js
View File

@ -33,7 +33,7 @@ gemini.suite('Authenticated', (suite) => {
}); });
}); });
gemini.suite('Authenticated', (authenticatedSuite) => { gemini.suite('Authenticated', () => {
gemini.suite('Header-desktop', (headerSuite) => { gemini.suite('Header-desktop', (headerSuite) => {
headerSuite headerSuite
.setCaptureElements('nav.navbar .container') .setCaptureElements('nav.navbar .container')
@ -48,17 +48,38 @@ gemini.suite('Authenticated', (suite) => {
gemini.suite('User dropdown', (headerUserSuite) => { gemini.suite('User dropdown', (headerUserSuite) => {
headerUserSuite headerUserSuite
.setCaptureElements('#nav-route-user-dropdown ~ .dropdown-menu') .setCaptureElements('#nav-route-user-dropdown-container .dropdown-menu')
.capture('expanded user dropdown', (actions, find) => { .capture('expanded user dropdown', (actions, find) => {
actions.click(find('#nav-route-user-dropdown')); actions.click(find('#nav-route-user-dropdown'));
// React-bootstrap's dropdown buttons are wrapped around list items when they're in a navigation
// context, so we can't use a simple sibling selector here to capture the dropdown menu. Instead,
// we'll manually add an id to the dropdown container to allow us to select it.
// eslint-disable-next-line prefer-arrow-callback
actions.executeJS(function addIdToUserDropdownContainer(window) {
/* eslint-disable no-var, prefer-template */
var userDropdownButtonSelector = '#nav-route-user-dropdown';
var userDropdownButton = window.document.querySelector(userDropdownButtonSelector);
var parentEl = userDropdownButton.parentElement;
while (parentEl && parentEl.className.split(' ').indexOf('dropdown') === -1) {
parentEl = parentEl.parentElement;
}
if (parentEl) {
parentEl.id = 'nav-route-user-dropdown-container';
}
/* eslint-enable no-var */
});
}); });
}); });
gemini.suite('Notification dropdown', (headerNotificationSuite) => { gemini.suite('Notification dropdown', (headerNotificationSuite) => {
headerNotificationSuite headerNotificationSuite
.setCaptureElements('#header-notification-dropdown ~ .dropdown-menu') .setCaptureElements('.notification-menu .dropdown-menu')
.capture('expanded notifications dropdown', (actions, find) => { .capture('expanded notifications dropdown', (actions, find) => {
actions.click(find('#header-notification-dropdown')); actions.click(find('#header-notification-dropdown'));
actions.waitForElementToShow('.notification-menu .dropdown-menu', TIMEOUTS.SHORT);
}); });
}); });
}); });
@ -110,7 +131,8 @@ gemini.suite('Authenticated', (suite) => {
collectionPlaceholderSuite collectionPlaceholderSuite
.setCaptureElements('.ascribe-accordion-list-placeholder') .setCaptureElements('.ascribe-accordion-list-placeholder')
.capture('collection empty search', (actions, find) => { .capture('collection empty search', (actions, find) => {
actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'no search result'); actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'),
'no search result');
actions.waitForElementToShow('.ascribe-accordion-list-placeholder', TIMEOUTS.NORMAL); actions.waitForElementToShow('.ascribe-accordion-list-placeholder', TIMEOUTS.NORMAL);
}); });
}); });
@ -136,7 +158,7 @@ gemini.suite('Authenticated', (suite) => {
.capture('piece list toolbar search filled', (actions, find) => { .capture('piece list toolbar search filled', (actions, find) => {
actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text'); actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search', actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search',
TIMEOUTS.NORMAL); TIMEOUTS.LONG);
}); });
gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => { gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
@ -147,7 +169,8 @@ gemini.suite('Authenticated', (suite) => {
actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown')); actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown'));
// Wait as the dropdown screenshot still includes the collection in the background // Wait as the dropdown screenshot still includes the collection in the background
actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL); actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)',
TIMEOUTS.NORMAL);
}); });
}); });
@ -159,7 +182,8 @@ gemini.suite('Authenticated', (suite) => {
actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown')); actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown'));
// Wait as the dropdown screenshot still includes the collection in the background // Wait as the dropdown screenshot still includes the collection in the background
actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL); actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)',
TIMEOUTS.NORMAL);
}); });
}); });
}); });

4
test/gemini/tests/main/detail.js
View File

@ -62,7 +62,6 @@ gemini.suite('Authenticated work detail', (suite) => {
.setUrl('/login') .setUrl('/login')
.ignoreElements('.ascribe-body') .ignoreElements('.ascribe-body')
.capture('logged in', (actions, find) => { .capture('logged in', (actions, find) => {
console.log('logging in');
actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email); actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password); actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password);
actions.click(find('.ascribe-login-wrapper button[type=submit]')); actions.click(find('.ascribe-login-wrapper button[type=submit]'));
@ -83,7 +82,6 @@ gemini.suite('Authenticated work detail', (suite) => {
}); });
gemini.suite('Authorized piece', (authorizedPieceSuite) => { gemini.suite('Authorized piece', (authorizedPieceSuite) => {
console.log('authorized piece');
authorizedPieceSuite authorizedPieceSuite
.setUrl(pieceUrl) .setUrl(pieceUrl)
.capture('authorized piece'); .capture('authorized piece');
@ -99,7 +97,6 @@ gemini.suite('Authenticated work detail', (suite) => {
detailActionButtonSuite detailActionButtonSuite
.setUrl(editionUrl) .setUrl(editionUrl)
.capture('hover on action button', (actions, find) => { .capture('hover on action button', (actions, find) => {
console.log('hover on action button');
actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-default')); actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-default'));
}) })
.capture('hover on delete button', (actions, find) => { .capture('hover on delete button', (actions, find) => {
@ -147,7 +144,6 @@ gemini.suite('Authenticated work detail', (suite) => {
.setUrl('/logout') .setUrl('/logout')
.ignoreElements('.ascribe-body') .ignoreElements('.ascribe-body')
.before((actions) => { .before((actions) => {
console.log('before log out');
actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL); actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
}) })
.capture('logout', (actions) => { .capture('logout', (actions) => {