Search field improvements (#4199)

e2e/client/specs/helpers/monitoring.ts

@@ -344,7 +344,6 @@ class Monitoring {
         };
 
         this.searchAction = function(search) {
-            element(by.css('.flat-searchbar .trigger-icon')).click();
             element(by.model('query')).sendKeys(search);
             browser.actions().sendKeys(protractor.Key.ENTER).perform();
         };

scripts/apps/authoring/metadata/views/metadata-terms.html

@@ -90,7 +90,7 @@
                             <sd-user-avatar data-user="term.user" scroll-container="'#metadata-terms-dropdown-users'"></sd-user-avatar>
                         </span>
                         <span>{{getLocaleName(term, item)}}</span>
-                        <i class="icon-chevron-right-thin sd-margin-l--auto nested-indicator"></i></button>
+                        <i class="icon-chevron-right-thin sd-margin-start--auto nested-indicator"></i></button>
                     <button ng-if="!tree[term[uniqueField]]" ng-click="selectTerm(term, $event)" title="{{getLocaleName(term, item)}}" ng-class="{'greyout': isSelected(term)}" ng-disabled="isSelected(term)">
                         {{getLocaleName(term, item)}}
                     </button>

scripts/apps/authoring/multiedit/views/multiedit.html

@@ -1,6 +1,6 @@
 <div class="subnav subnav--top">
     <h2 class="page-nav-title" translate>Multiedit</h2>
-    <button class="btn btn--hollow sd-margin-r--1" ng-click="closeMulti()" translate>Exit</button>
+    <button class="btn btn--hollow sd-margin-end--1" ng-click="closeMulti()" translate>Exit</button>
 </div>
 <div class="multiedit-screen main-section">
     <div class="boards-list">

scripts/apps/content-filters/views/manage-filters.html

@@ -142,8 +142,8 @@ <h3 class="modal__heading" translate ng-hide="contentFilter._id">Add New Content
                         ng-class="{'sd-alert--alert': !test.match_results, 'sd-alert--success': test.match_results}"
                         class="sd-alert sd-alert--hollow sd-alert--small sd-alert--no-margin sd-margin-t--2"
                         ng-if="test.content_tested">
-                        <i ng-if="!test.match_results" class="icon-ban-circle sd-margin-r--1"></i>
-                        <i ng-if="test.match_results" class="icon-ok sd-margin-r--1"></i>
+                        <i ng-if="!test.match_results" class="icon-ban-circle sd-margin-end--1"></i>
+                        <i ng-if="test.match_results" class="icon-ok sd-margin-end--1"></i>
                         <span ng-if="test.match_results" translate>Does match</span>
                         <span ng-if="!test.match_results" translate>Doesn't match</span>
                     </div>

scripts/apps/dashboard/user-activity/user-activity.ts

@@ -17,7 +17,7 @@ angular
         'Upon selection a list of content items is shown categorized as follows:',
     )}
 </p>
-<ul class="simple-list sd-padding-l--2">
+<ul class="simple-list sd-padding-start--2">
   <li class="simple-list__item">
     ${gettext('Items created by the user')}
   </li>

scripts/apps/ingest/views/settings/ingest-sources-content.html

@@ -1,8 +1,8 @@
 <div class="sd-page__flex-helper">
     <div class="sd-page__header">
-        <div class="flat-searchbar" ng-class="{extended: queueSearch}">
+        <div class="flat-searchbar extended">
             <div class="search-handler" >
-                <label for="search-input" class="trigger-icon" ng-click="queueSearch = !queueSearch"><i class="icon-search"></i></label>
+                <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
                 <input id="search-input" type="text" placeholder="{{ :: 'Search' | translate }}" ng-model="query" ng-model-options="{debounce: 500}" ng-change="search(query)">
             </div>
         </div>

scripts/apps/internal-destinations/views/settings.html

@@ -1,6 +1,6 @@
 <sd-settings-view>
     <div class="sd-page__main-content">
-        <div className="sd-page__content" style="height: 100%; display: flex;flex-direction: column;">
+        <div class="sd-page__content sd-padding--0">
             <div class="sd-page__header">
                 <h2 class="sd-page__page-heading" translate>Internal Destinations</h2>
             </div>

scripts/apps/master-desk/components/CardListComponent.tsx

@@ -11,7 +11,7 @@ export class CardListComponent extends React.Component<IProps> {
         return (
             <li className="sd-board__list-item">
                 <h6 className="sd-board__list-item-title">{this.props.name}</h6>
-                <span className="badge sd-margin-r--0-5" style={{'background': this.props.color}}>
+                <span className="badge sd-margin-end--0-5" style={{'background': this.props.color}}>
                     {this.props.total || 0}
                 </span>
             </li>

scripts/apps/master-desk/components/FilterBarComponent.tsx

@@ -30,7 +30,7 @@ export class FilterBarComponent extends React.Component<IProps, {}> {
                             ) : null,
                         )}
                     </ul>
-                    <a className="text-link sd-margin-l--auto" onClick={() => this.props.removeAllFilters()}>
+                    <a className="text-link sd-margin-start--auto" onClick={() => this.props.removeAllFilters()}>
                         {gettext('Clear all filters')}
                     </a>
                 </div>

scripts/apps/monitoring/views/monitoring-view.html

@@ -6,7 +6,7 @@ <h2 id="monitoring-heading" class="a11y-only" ng-if="type === 'spike'" translate
             <div class="content-list monitoring__content" ng-class="{'sd-loader': aggregate.loading}">
                 <div class="monitoring__toolbar-container" ng-if="hideMonitoringToolbar1 !== true || hideMonitoringToolbar2 !== true">
                     <div class="subnav" ng-if="hideMonitoringToolbar1 !== true">
-                        <div class="flat-searchbar monitoring-backlink" ng-if="monitoring.singleGroup">
+                        <div class="monitoring-backlink" ng-if="monitoring.singleGroup">
                             <button sd-tooltip="{{ 'Back to original view' | translate }}" flow="right" class="navbtn navbtn--left" ng-click="monitoring.viewMonitoringHome()">
                                 <i class="icon-arrow-left"></i>
                             </button>
@@ -91,9 +91,9 @@ <h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.sing
                         </div>
 
                         <!-- search not implemented for usage with custom data source -->
-                        <div ng-if="customDataSource == null" class="flat-searchbar monitoring-flat-searchbar" ng-class="{extended: aggregate.monitoringSearch}">
+                        <div ng-if="customDataSource == null" class="flat-searchbar extended monitoring-flat-searchbar">
                             <div class="search-handler" ng-class="{'search-handler--left-border': !monitoring.singleGroup}">
-                                <label for="search-input" class="trigger-icon" ng-click="aggregate.monitoringSearch = !aggregate.monitoringSearch"><i class="icon-search"></i></label>
+                                <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
                                 <input id="search-input" type="text" placeholder="{{ 'Search' | translate }}" ng-model="query"
                                        ng-keyup="aggregate.searchOnEnter($event, query)">
                                 <button class="search-close" ng-click="aggregate.search(query = null)" ng-class="{visible: query}" aria-label="{{ 'Clear search' | translate }}"><i class="icon-remove-sign"></i></button>
@@ -104,7 +104,7 @@ <h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.sing
                         </div>
 
                         <div sd-multi-action-bar></div>
-                        <div class="subnav__button-stack--square-buttons sd-margin-l--auto">
+                        <div class="subnav__button-stack--square-buttons sd-margin-start--auto">
                             <div class="refresh-box">
                                 <button ng-if="monitoring.showRefresh && (monitoring.singleGroup || monitoring.viewColumn)"
                                         ng-click="refreshGroup(monitoring.singleGroup)"
@@ -206,7 +206,7 @@ <h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.sing
 
                         <div ng-if="type === 'monitoring' && monitoring.viewColumn === true" class="subnav__button-stack subnav__button-stack--padded">
                             <span class="sd-overflow-ellipsis" translate>Columns:</span>
-                            <input class="line-input line-input--inline-mini sd-margin-l--1" type="number" min="2" max="{{aggregate.groups.length}}" ng-model="monitoring.columnsLimit">
+                            <input class="line-input line-input--inline-mini sd-margin-start--1" type="number" min="2" max="{{aggregate.groups.length}}" ng-model="monitoring.columnsLimit">
                         </div>
 
                         <div class="dropdown dropdown--align-right dropdown--compact-state" dropdown  ng-if="type === 'monitoring'">

scripts/apps/publish/views/publish-queue.html

@@ -2,9 +2,9 @@
     <div class="preview-layout" ng-class="{closed: !selected.preview}">
 
         <header class="subnav">
-                <div class="flat-searchbar" ng-class="{extended: queueSearch}">
+                <div class="flat-searchbar extended">
                     <div class="search-handler" role="search">
-                        <label for="search-input" class="trigger-icon" ng-click="queueSearch = !queueSearch"><i class="icon-search"></i></label>
+                        <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
                         <input id="search-input" type="text" placeholder="{{ :: 'Search' | translate }}" ng-model="query" ng-model-options="{debounce: 500}" ng-change="search(query)">
                         <button class="search-close" ng-click="search(query = null)" ng-class="{visible: query}" aria-label="{{ :: 'Clear search' | translate }}"><i class="icon-remove-sign"></i></button>
                     </div>

scripts/apps/search/styles/search.scss

@@ -158,36 +158,43 @@
     border-left: 1px solid var(--sd-colour-line--light);
     border-right: 1px solid var(--sd-colour-line--light);
     position: relative;
+    transition: all 0.2s ease;
+    &:hover {
+        background-color: var(--sd-colour-bg__searchbar);
+    }
 
     &.focused {
         background: var(--sd-colour-bg__searchbar);
         box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
+        background-color: var(--sd-colour-bg__searchbar);
     }
     .search-icon {
         @include user-select(none);
         width: 28px;
         height: 28px;
         display: inline-block;
-        background: url(~images/search-icon.png) no-repeat 5px 5px;
-        opacity: 0.6;
-        &:hover {
-            cursor: pointer;
-            opacity: 1;
+        opacity: 0.5;
+        position: absolute;
+        width: $nav-height;
+        height: $nav-height;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        i {
+            color: var(--color-icon-default);
+            margin-inline-start: 4px;
         }
     }
 
-    .button {
+    .search-start {
         position: absolute;
-        width: $nav-height;
-        height: $nav-height;
-        background-position: center;
-        top: 0;
-        border: 0;
+        opacity: 1;
+        display: flex;
+        inset-block-start: 10px;
+        inset-inline-end: 16px;
         margin: 0;
-        .svg-icon-right {
-            width: 18px;
-            margin-top: 3px;
-        }
     }
 
     input {
@@ -215,7 +222,8 @@
 
     .search-cancel {
         position: absolute;
-        top: 12px; right: 55px;
+        top: 12px;
+        right: 55px;
         background: transparent;
         border: 0;
         padding: 0;

scripts/apps/search/views/item-searchbar.html

@@ -1,6 +1,8 @@
 <div class="item-searchbar" ng-class="{focused: focused}" ng-click="$event.stopPropagation();">
 
-    <label for="search-input" class="button search-icon"></label>
+    <label for="search-input" class="search-icon">
+        <i class="icon-search"></i>
+    </label>
 
     <input id="search-input"
         type="text"
@@ -14,8 +16,8 @@
         <i class="icon-remove-sign"></i>
     </button>
 
-    <button id="search-button" ng-click="search();" class="button trigger" ng-if="focused" tabindex="2">
-        <i class="svg-icon-right"></i>
+    <button id="search-button" ng-click="search();" class="search-start" aria-label="{{ 'Start search' | translate }}" ng-if="focused" tabindex="2">
+        <i class="icon-chevron-right-thin"></i>
     </button>
 
 </div>

scripts/apps/users/views/list.html

@@ -64,7 +64,7 @@ <h3 class="subnav__page-title" translate>Users</h3>
 
             <div class="preview-pane" ng-if="selected.user">
                 <header>
-                    <button ng-click="intent('detail', 'user', selected.user)" class="btn btn--small btn--hollow sd-margin-l--2" ng-show="selected.user._id" id="open-user-profile" translate>View full profile</button>
+                    <button ng-click="intent('detail', 'user', selected.user)" class="btn btn--small btn--hollow sd-margin-start--2" ng-show="selected.user._id" id="open-user-profile" translate>View full profile</button>
                     <button ng-click="selected.user = null" class="icn-btn close-preview"><i class="icon-close-small"></i></button>
                 </header>
                 <div sd-user-details-pane ng-if="selected.user">

scripts/apps/vocabularies/components/VocabularyItemsViewEdit.tsx

@@ -185,7 +185,6 @@ interface IState {
     items: Array<IVocabularyItemWithId>;
     page: number;
     searchTerm: string;
-    searchExtended: boolean;
     sortDropdownOpen: boolean;
     sort: ISortOption | null;
     errorMessage: string | null;
@@ -220,7 +219,6 @@ export class VocabularyItemsViewEdit extends React.Component<IProps, IState> {
             ),
             page: 1,
             searchTerm: '',
-            searchExtended: false,
             sortDropdownOpen: false,
             sort: initialSortOption,
             errorMessage: null,
@@ -330,15 +328,12 @@ export class VocabularyItemsViewEdit extends React.Component<IProps, IState> {
         return (
             <React.Fragment>
                 <div className="subnav">
-                    <div className={'flat-searchbar' + (this.state.searchExtended ? ' extended' : '')}>
+                    <div className="flat-searchbar extended">
                         <div className="search-handler" role="search">
                             <label
                                 className="trigger-icon"
                                 htmlFor="vocabulary-search"
                                 aria-label={gettext('Toggle search')}
-                                onClick={() => {
-                                    this.setState({searchExtended: !this.state.searchExtended});
-                                }}
                             >
                                 <i className="icon-search" />
                             </label>
@@ -357,7 +352,7 @@ export class VocabularyItemsViewEdit extends React.Component<IProps, IState> {
                         </div>
                     </div>
 
-                    <div className="sortbar sd-margin-l--auto">
+                    <div className="sortbar sd-margin-start--auto">
                         {this.state.sort == null ? null : (
                             <Dropdown
                                 isOpen={this.state.sortDropdownOpen}

scripts/apps/workspace/content/views/profile-settings.html

@@ -3,11 +3,13 @@
         <div class="sd-page__header sd-page__header--white">
             <h2 class="sd-page__page-heading" translate>Content Profiles</h2>
         </div>
-        <div class="sd-page__header">
+        <div class="sd-page__header">         
             <sd-search-handler ng-model="query.label" data-debounce="200"></sd-search-handler>
-
-            <sd-check ng-model="active_only" label-position="inside" type="radio" style="margin-left: 0;">{{:: 'All'| translate}}</sd-check>
-            <sd-check ng-model="active_only" ng-value="true" label-position="inside" type="radio" ng-checked="true">{{:: 'Active only'| translate}}</sd-check>
+            <div class="button-group button-group--start button-group--comfort">
+                <sd-check ng-model="active_only" label-position="inside" type="radio" style="margin-left: 0;">{{:: 'All'| translate}}</sd-check>
+                <sd-check ng-model="active_only" ng-value="true" label-position="inside" type="radio" ng-checked="true">{{:: 'Active only'| translate}}</sd-check>
+            </div>
+
             <span class="sd-page__element-grow"></span>
             <button id="add-new-content-profile" class="btn btn--primary" ng-click="ctrl.toggleCreate()" data-close="cancel()">
                 <i class="icon-plus-sign icon--white"></i>{{ :: 'Add New' | translate }}

scripts/core/ArticlesListByQueryWithFilters.tsx

@@ -350,7 +350,14 @@ export class ArticlesListByQueryWithFilters extends React.PureComponent<IProps,
                                         </h3>
                                         <Badge type="default">{itemsCount}</Badge>
                                     </div>
-                                    <div style={{marginLeft: 10, flexGrow: 1}}>
+                                    <div
+                                        className={classNames(
+                                            'sd-display--flex',
+                                            'sd-flex--grow',
+                                            'sd-flex--align-self-stretch',
+                                            'sd-margin-start--2',
+                                        )}
+                                    >
                                         <SearchBar
                                             allowCollapsed={false}
                                             extendOnOpen={false}

scripts/core/itemList/views/relatedItem-list-widget.html

@@ -16,8 +16,8 @@
                     </div>
                     <div class="boxed-list__item-content" ng-click="view(item)">
                         <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                            <span class="badge badge--square green--600 sd-margin-r--1" ng-if="options.searchEnabled && actions.update && actions.update.condition(item)" title="{{ :: 'Can be associated as an update' | translate }}">U</span>
-                            <span class="badge badge--square indigo--600 sd-margin-r--1" ng-if="options.searchEnabled && actions.addTake && actions.addTake.condition(item)" title="{{ :: 'Can be associated as a take' | translate }}">T</span>
+                            <span class="badge badge--square green--600 sd-margin-end--1" ng-if="options.searchEnabled && actions.update && actions.update.condition(item)" title="{{ :: 'Can be associated as an update' | translate }}">U</span>
+                            <span class="badge badge--square indigo--600 sd-margin-end--1" ng-if="options.searchEnabled && actions.addTake && actions.addTake.condition(item)" title="{{ :: 'Can be associated as a take' | translate }}">T</span>
                             <span class="sd-text__slugline sd-overflow-ellipsis" title="{{ item.slugline }}">{{ item.slugline }}</span>
                             <time class="sd-text__date-time sd-text__date-time--small ml-auto" sd-datetime data-date="item.versioncreated">25.04.2019</time>
                         </div>