Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search field improvements #4199

Merged
merged 5 commits into from
Feb 16, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Code review based fixes & CSS updates
  • Loading branch information
fritzSF committed Feb 6, 2023
commit e28f1ec7e384145f85493848b293397569900e2e
2 changes: 1 addition & 1 deletion scripts/apps/authoring/metadata/views/metadata-terms.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/authoring/multiedit/views/multiedit.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
4 changes: 2 additions & 2 deletions scripts/apps/content-filters/views/manage-filters.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/dashboard/user-activity/user-activity.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/master-desk/components/CardListComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/master-desk/components/FilterBarComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions scripts/apps/monitoring/views/monitoring-view.html
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand Down Expand Up @@ -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'">
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/users/views/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,6 @@ interface IState {
items: Array<IVocabularyItemWithId>;
page: number;
searchTerm: string;
searchExtended: boolean;
sortDropdownOpen: boolean;
sort: ISortOption | null;
errorMessage: string | null;
Expand Down Expand Up @@ -220,7 +219,6 @@ export class VocabularyItemsViewEdit extends React.Component<IProps, IState> {
),
page: 1,
searchTerm: '',
searchExtended: false,
sortDropdownOpen: false,
sort: initialSortOption,
errorMessage: null,
Expand Down Expand Up @@ -354,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}
Expand Down
8 changes: 6 additions & 2 deletions scripts/core/ArticlesListByQueryWithFilters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -351,8 +351,12 @@ export class ArticlesListByQueryWithFilters extends React.PureComponent<IProps,
<Badge type="default">{itemsCount}</Badge>
</div>
<div
className="sd-display--flex sd-flex--grow
sd-flex--align-self-stretch sd-margin-l--2"
className={classNames(
'sd-display--flex',
'sd-flex--grow',
'sd-flex--align-self-stretch',
'sd-margin-start--2',
)}
>
<SearchBar
allowCollapsed={false}
Expand Down
4 changes: 2 additions & 2 deletions scripts/core/itemList/views/relatedItem-list-widget.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 9 additions & 2 deletions scripts/core/ui/components/ListPage/generic-list-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import React from 'react';
import {noop} from 'lodash';
import ReactPaginate from 'react-paginate';

import classNames from 'classnames';
import {ListItem, ListItemColumn} from 'core/components/ListItem';
import {PageContainer, PageContainerItem} from 'core/components/PageLayout';
import {GenericListPageItemViewEdit} from './generic-list-page-item-view-edit';
Expand Down Expand Up @@ -411,7 +411,14 @@ export class GenericListPageComponent<T>
)
}

<div className="sd-display--flex sd sd-padding-s--2 sd-margin-s--auto sd-gap--small">
<div
className={classNames(
'sd-display--flex',
'sd-padding-s--2',
'sd-margin-start--auto',
'sd-gap--small',
)}
>
{this.props.crudManager._meta.total == null ? null : (
<span className="sd-display--flex sd-flex--items-center sd-gap--small">
<span>{gettext('Total:')}</span>
Expand Down
9 changes: 0 additions & 9 deletions scripts/core/ui/components/SearchBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export default class SearchBar extends React.Component<IProps, IState> {
};

this.dom = {searchIcon: null};
this.toggleSearchBar = this.toggleSearchBar.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
this.resetSearch = this.resetSearch.bind(this);
this.resetSearchValue = this.resetSearchValue.bind(this);
Expand All @@ -54,14 +53,6 @@ export default class SearchBar extends React.Component<IProps, IState> {
}
}

toggleSearchBar() {
if (this.props.allowCollapsed === false) {
return;
}

this.setState({searchBarExtended: !this.state.searchBarExtended});
}

/** Reset the field value, close the search bar and load events */
resetSearch() {
this.setState({
Expand Down
4 changes: 2 additions & 2 deletions scripts/extensions/sams/src/components/workspaceSubnav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -397,8 +397,8 @@ export class WorkspaceSubnavComponent extends React.PureComponent<IProps> {
)}
flow="down"
>
<span className="sd-margin-r--1">
<span className="sd-margin-r--1">
<span className="sd-margin-end--1">
<span className="sd-margin-end--1">
{gettext('Total:')}
</span>
<Badge text={numberToString(this.props.totalAssets)} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ export class VideoEditorThumbnail extends React.Component<IProps, IState> {
>
<i className="icon-photo" />
</a>
<form className="sd-margin-l--1">
<form className="sd-margin-start--1">
<label>
<input
type="file"
Expand Down
14 changes: 10 additions & 4 deletions styles/sass/sf-additional.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2398,7 +2398,7 @@ sd-multi-image-edit {

// Logical Properties & Values for margins and paddings
// Margin
.sd-margin-s {
.sd-margin-start {
&--0-5 {
margin-inline-start: $sd-base-increment / 2;
}
Expand All @@ -2420,8 +2420,11 @@ sd-multi-image-edit {
&--5 {
margin-inline-start: $sd-base-increment * 5;
}
&--auto {
margin-inline-start: auto;
}
}
.sd-margin-e {
.sd-margin-end {
&--0-5 {
margin-inline-end: $sd-base-increment / 2;
}
Expand All @@ -2443,10 +2446,13 @@ sd-multi-image-edit {
&--5 {
margin-inline-end: $sd-base-increment * 5;
}
&--auto {
margin-inline-end: auto;
}
}

// Padding
.sd-padding-s {
.sd-padding-start {
&--0-5 {
padding-inline-start: $sd-base-increment / 2;
}
Expand All @@ -2469,7 +2475,7 @@ sd-multi-image-edit {
padding-inline-start: $sd-base-increment * 5;
}
}
.sd-padding-e {
.sd-padding-end {
&--0-5 {
padding-inline-end: $sd-base-increment / 2;
}
Expand Down