From 6ad870a410c7379eb8f3e719f3ad217354691546 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 27 Jun 2019 22:30:55 +0200 Subject: Change search components classes and styling to match upstream --- .../flavours/glitch/styles/components/drawer.scss | 78 +--------------------- .../flavours/glitch/styles/components/search.scss | 27 ++++++-- .../glitch/styles/components/single_column.scss | 2 +- 3 files changed, 23 insertions(+), 84 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 0e50482f6..0994a9b43 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -73,90 +73,16 @@ } } -.drawer--search { +.search { position: relative; margin-bottom: 10px; flex: none; @include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 } @include single-column('screen and (max-width: 630px)') { font-size: 16px } - - input { - display: block; - box-sizing: border-box; - margin: 0; - border: none; - padding: 15px 30px 15px 15px; - width: 100%; - outline: 0; - color: $darker-text-color; - background: $ui-base-color; - font-size: 14px; - font-family: inherit; - line-height: 16px; - - &:focus { - outline: 0; - background: lighten($ui-base-color, 4%); - } - } - - & > .icon { - display: block; - position: absolute; - top: 10px; - right: 10px; - width: 18px; - height: 18px; - color: $secondary-text-color; - font-size: 18px; - line-height: 18px; - z-index: 2; - - .fa { - display: inline-block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - opacity: 0; - cursor: default; - pointer-events: none; - transition: all 100ms linear; - transition-property: color, transform, opacity; - } - - .fa-search { - opacity: 0.3; - transform: rotate(0deg); - } - - .fa-times-circle { - transform: rotate(-90deg); - cursor: pointer; - - &:hover { color: $primary-text-color } - } - } - - &.active { - & > .icon { - .fa-search { - opacity: 0; - transform: rotate(90deg); - } - - .fa-times-circle { - opacity: 0.3; - pointer-events: auto; - transform: rotate(0deg); - } - } - } } -.drawer--search--popout { +.search-popout { @include search-popout(); } diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 3ef141133..7c5039efc 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -3,13 +3,25 @@ } .search__input { + @include search-input(); + display: block; - padding: 10px; + padding: 15px; padding-right: 30px; - @include search-input(); + line-height: 18px; + font-size: 16px; } .search__icon { + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus { + outline: 0 !important; + } + .fa { position: absolute; top: 16px; @@ -18,7 +30,7 @@ display: inline-block; opacity: 0; transition: all 100ms linear; - transition-property: transform, opacity; + transition-property: color, transform, opacity; font-size: 18px; width: 18px; height: 18px; @@ -33,17 +45,18 @@ } .fa-search { - transform: rotate(90deg); + transform: rotate(0deg); &.active { - pointer-events: none; - transform: rotate(0deg); + pointer-events: auto; + opacity: 0.3; } } .fa-times-circle { top: 17px; transform: rotate(0deg); + color: $action-button-color; cursor: pointer; &.active { @@ -51,7 +64,7 @@ } &:hover { - color: $primary-text-color; + color: lighten($action-button-color, 7%); } } } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index ca962abd2..e0f3d62a7 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -6,7 +6,7 @@ height: calc(100% - 10px); overflow-y: hidden; - .drawer--search input { + .search__input { line-height: 18px; font-size: 16px; padding: 15px; -- cgit From 43698e08cad195df6f85aea26c710c2e1614a4a3 Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 27 Jun 2019 21:12:26 +0200 Subject: [Glitch] Add message telling FTS is disabled when no toot can be found because of this Port ca8944728f4568bbef8edae99382cd44cbc144d6 to glitch-soc --- app/javascript/flavours/glitch/actions/search.js | 7 +++---- .../glitch/features/compose/components/search_results.js | 16 ++++++++++++++-- .../compose/containers/search_results_container.js | 1 + app/javascript/flavours/glitch/reducers/search.js | 3 ++- .../flavours/glitch/styles/components/search.scss | 5 +++++ 5 files changed, 25 insertions(+), 7 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/actions/search.js b/app/javascript/flavours/glitch/actions/search.js index b2d24e10b..9ce77b24b 100644 --- a/app/javascript/flavours/glitch/actions/search.js +++ b/app/javascript/flavours/glitch/actions/search.js @@ -48,7 +48,7 @@ export function submitSearch() { dispatch(importFetchedStatuses(response.data.statuses)); } - dispatch(fetchSearchSuccess(response.data)); + dispatch(fetchSearchSuccess(response.data, value)); dispatch(fetchRelationships(response.data.accounts.map(item => item.id))); }).catch(error => { dispatch(fetchSearchFail(error)); @@ -62,12 +62,11 @@ export function fetchSearchRequest() { }; }; -export function fetchSearchSuccess(results) { +export function fetchSearchSuccess(results, searchTerm) { return { type: SEARCH_FETCH_SUCCESS, results, - accounts: results.accounts, - statuses: results.statuses, + searchTerm, }; }; diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.js b/app/javascript/flavours/glitch/features/compose/components/search_results.js index 69df8cdc9..dd99f3430 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search_results.js +++ b/app/javascript/flavours/glitch/features/compose/components/search_results.js @@ -7,6 +7,7 @@ import StatusContainer from 'flavours/glitch/containers/status_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Hashtag from 'flavours/glitch/components/hashtag'; import Icon from 'flavours/glitch/components/icon'; +import { searchEnabled } from 'flavours/glitch/util/initial_state'; const messages = defineMessages({ dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' }, @@ -20,6 +21,7 @@ class SearchResults extends ImmutablePureComponent { suggestions: ImmutablePropTypes.list.isRequired, fetchSuggestions: PropTypes.func.isRequired, dismissSuggestion: PropTypes.func.isRequired, + searchTerm: PropTypes.string, intl: PropTypes.object.isRequired, }; @@ -27,8 +29,8 @@ class SearchResults extends ImmutablePureComponent { this.props.fetchSuggestions(); } - render() { - const { intl, results, suggestions, dismissSuggestion } = this.props; + render () { + const { intl, results, suggestions, dismissSuggestion, searchTerm } = this.props; if (results.isEmpty() && !suggestions.isEmpty()) { return ( @@ -51,6 +53,16 @@ class SearchResults extends ImmutablePureComponent { ); + } else if(results.get('statuses') && results.get('statuses').size === 0 && !searchEnabled && !(searchTerm.startsWith('@') || searchTerm.startsWith('#') || searchTerm.includes(' '))) { + statuses = ( +
+
+ +
+ +
+
+ ); } let accounts, statuses, hashtags; diff --git a/app/javascript/flavours/glitch/features/compose/containers/search_results_container.js b/app/javascript/flavours/glitch/features/compose/containers/search_results_container.js index f9637861a..e4d5f3420 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/search_results_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/search_results_container.js @@ -5,6 +5,7 @@ import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestion const mapStateToProps = state => ({ results: state.getIn(['search', 'results']), suggestions: state.getIn(['suggestions', 'items']), + searchTerm: state.getIn(['search', 'searchTerm']), }); const mapDispatchToProps = dispatch => ({ diff --git a/app/javascript/flavours/glitch/reducers/search.js b/app/javascript/flavours/glitch/reducers/search.js index 9a525bf47..1c32a5b9f 100644 --- a/app/javascript/flavours/glitch/reducers/search.js +++ b/app/javascript/flavours/glitch/reducers/search.js @@ -16,6 +16,7 @@ const initialState = ImmutableMap({ submitted: false, hidden: false, results: ImmutableMap(), + searchTerm: '', }); export default function search(state = initialState, action) { @@ -40,7 +41,7 @@ export default function search(state = initialState, action) { accounts: ImmutableList(action.results.accounts.map(item => item.id)), statuses: ImmutableList(action.results.statuses.map(item => item.id)), hashtags: fromJS(action.results.hashtags), - })).set('submitted', true); + })).set('submitted', true).set('searchTerm', action.searchTerm); default: return state; } diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 7c5039efc..117da362f 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -78,6 +78,11 @@ font-weight: 500; } +.search-results__info { + padding: 10px; + color: $secondary-text-color; +} + .trends { &__header { color: $dark-text-color; -- cgit