LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

clean up claim_search filters

Browse source
This commit is contained in:
Sean Yesmunt 2020-11-13 15:25:18 -05:00
parent 4a893bb2f0
commit 026b416ca1
10 changed files with 65 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.js
View file

@ -2,6 +2,8 @@
// On Desktop App, this will find .env.defaults and optional .env in root dir
require('dotenv-defaults').config({ silent: false });
console.log('process.env.SIMPLE_SITE', process.env.SIMPLE_SITE);
const config = {
MATOMO_URL: process.env.MATOMO_URL,
MATOMO_ID: process.env.MATOMO_ID,

6
ui/component/claimListDiscover/view.jsx
View file

@ -279,7 +279,7 @@ function ClaimListDiscover(props: Props) {
if (durationParam) {
if (durationParam === CS.DURATION_SHORT) {
options.duration = '<=1800';
options.duration = '<=240';
} else if (durationParam === CS.DURATION_LONG) {
options.duration = '>=1800';
}
@ -472,7 +472,7 @@ function ClaimListDiscover(props: Props) {
{!repostedClaimId && (
<div className="section__header--actions">
{headerToUse}
{meta && <div className="card__actions--inline">{meta}</div>}
{meta && <div className="section__actions--no-margin">{meta}</div>}
</div>
)}
<ClaimList
@ -501,7 +501,7 @@ function ClaimListDiscover(props: Props) {
<div>
<div className="section__header--actions">
{headerToUse}
{meta && <div className="card__actions--inline">{meta}</div>}
{meta && <div className="section__actions--no-margin">{meta}</div>}
</div>
<ClaimList

80
ui/component/claimListHeader/view.jsx
View file

@ -15,8 +15,6 @@ import SEARCHABLE_LANGUAGES from 'constants/searchable_languages';
type Props = {
defaultTags: string,
followedTags?: Array<Tag>,
tags: string,
freshness?: string,
defaultFreshness?: string,
claimType?: Array<string>,
@ -40,8 +38,6 @@ type Props = {
function ClaimListHeader(props: Props) {
const {
defaultTags,
followedTags,
tags,
freshness,
defaultFreshness,
claimType,
@ -66,12 +62,7 @@ function ClaimListHeader(props: Props) {
const [expanded, setExpanded] = usePersistedState(`expanded-${location.pathname}`, false);
const [orderParamEntry, setOrderParamEntry] = usePersistedState(`entry-${location.pathname}`, CS.ORDER_BY_TRENDING);
const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
const followed = (followedTags && followedTags.map(t => t.name)) || [];
const urlParams = new URLSearchParams(search);
const tagsParam = // can be 'x,y,z' or 'x' or ['x','y'] or CS.CONSTANT
(tags && getParamFromTags(tags)) ||
(urlParams.get(CS.TAGS_KEY) !== null && urlParams.get(CS.TAGS_KEY)) ||
(defaultTags && getParamFromTags(defaultTags));
const freshnessParam = freshness || urlParams.get(CS.FRESH_KEY) || defaultFreshness;
const contentTypeParam = urlParams.get(CS.CONTENT_KEY);
const streamTypeParam =
@ -148,14 +139,6 @@ function ClaimListHeader(props: Props) {
push(newSearch);
}
function getParamFromTags(t) {
if (t === CS.TAGS_ALL || t === CS.TAGS_FOLLOWED) {
return t;
} else if (Array.isArray(t)) {
return t.join(',');
}
}
function buildUrl(delta) {
const newUrlParams = new URLSearchParams(location.search);
CS.KEYS.forEach(k => {
@ -226,7 +209,7 @@ function ClaimListHeader(props: Props) {
<>
<div className="claim-search__wrapper">
<div className="claim-search__top">
<div className="claim-search__top-row">
<div className="claim-search__menu-group">
{!hideFilters &&
CS.ORDER_BY_TYPES.map(type => (
<Button
@ -249,13 +232,14 @@ function ClaimListHeader(props: Props) {
))}
</div>
<div className="claim-search__top-row">
<div className="claim-search__menu-group">
{!hideAdvancedFilter && !SIMPLE_SITE && (
<Button
button="alt"
aria-label={__('More')}
className={classnames(`button-toggle button-toggle--top button-toggle--more`, {
'button-toggle--custom': isFiltered(),
'button-toggle--active': expanded,
})}
icon={ICONS.SLIDERS}
onClick={() => setExpanded(!expanded)}
@ -277,7 +261,7 @@ function ClaimListHeader(props: Props) {
</div>
{expanded && !SIMPLE_SITE && (
<>
<div className={classnames('card--inline', `claim-search__menus`)}>
<div className={classnames(`card claim-search__menus`)}>
{/* FRESHNESS FIELD */}
{orderParam === CS.ORDER_BY_TOP && (
<div className="claim-search__input-container">
@ -421,8 +405,8 @@ function ClaimListHeader(props: Props) {
{CS.DURATION_TYPES.map(dur => (
<option key={dur} value={dur}>
{/* i18fixme */}
{dur === CS.DURATION_SHORT && __('Short')}
{dur === CS.DURATION_LONG && __('Long')}
{dur === CS.DURATION_SHORT && __('Short (< 4 minutes)')}
{dur === CS.DURATION_LONG && __('Long (> 20 min)')}
{dur === CS.DURATION_ALL && __('Any')}
</option>
))}
@ -430,51 +414,6 @@ function ClaimListHeader(props: Props) {
</div>
)}
{/* TAGS FIELD */}
{!tags && (
<div className={'claim-search__input-container'}>
<FormField
className={classnames('claim-search__dropdown', {
'claim-search__dropdown--selected':
((!defaultTags || defaultTags === CS.TAGS_ALL) && tagsParam && tagsParam !== CS.TAGS_ALL) ||
(defaultTags === CS.TAGS_FOLLOWED && tagsParam !== CS.TAGS_FOLLOWED),
})}
label={__('Tags')}
type="select"
name="tags"
value={tagsParam || CS.TAGS_ALL}
onChange={e =>
handleChange({
key: CS.TAGS_KEY,
value: e.target.value,
})
}
>
{[
CS.TAGS_ALL,
CS.TAGS_FOLLOWED,
...followed,
...(followed.includes(tagsParam) || tagsParam === CS.TAGS_ALL || tagsParam === CS.TAGS_FOLLOWED
? []
: [tagsParam]), // if they unfollow while filtered, add Other
].map(tag => (
<option
key={tag}
value={tag}
className={classnames({
'claim-search__input-special': !followed.includes(tag),
})}
>
{followed.includes(tag) && typeof tag === 'string' && toCapitalCase(tag)}
{tag === CS.TAGS_ALL && __('Any')}
{tag === CS.TAGS_FOLLOWED && __('Following')}
{!followed.includes(tag) && tag !== CS.TAGS_ALL && tag !== CS.TAGS_FOLLOWED && __('Other')}
</option>
))}
</FormField>
</div>
)}
{/* PAID FIELD */}
<div className={'claim-search__input-container'}>
<FormField
@ -503,7 +442,12 @@ function ClaimListHeader(props: Props) {
{channelIdsInUrl && (
<div className={'claim-search__input-container'}>
<label>{__('Advanced Filters from URL')}</label>
<Button button="alt" label={__('Clear')} onClick={handleAdvancedReset} />
<Button
button="alt"
className="claim-search__filter-button"
label={__('Clear')}
onClick={handleAdvancedReset}
/>
</div>
)}
</div>

2
ui/page/top/view.jsx
View file

@ -31,7 +31,7 @@ function TopPage(props: Props) {
</span>
)}
header={
<div className="claim-search__top-row">
<div className="claim-search__menu-group">
<Button
label={name}
button="alt"

3
ui/scss/component/_channel.scss
View file

@ -206,7 +206,8 @@ $metadata-z-index: 1;
@media (max-width: $breakpoint-small) {
flex-direction: column;
> * {
> .button,
> .button-group {
margin-right: 0;
margin-bottom: var(--spacing-xs);
margin-left: auto;

6
ui/scss/component/_claim-list.scss
View file

@ -51,7 +51,6 @@
display: flex;
align-items: center;
margin-left: auto;
// padding-top: var(--spacing-m);
& > * {
margin-left: var(--spacing-s);
@ -414,10 +413,6 @@
&:not(:first-child) {
margin-top: var(--spacing-s);
}
.channel-thumbnail {
display: none;
}
}
}
@ -467,7 +462,6 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 2.1rem;
font-size: var(--font-body);
}

66
ui/scss/component/_claim-search.scss
View file

@ -1,30 +1,37 @@
.claim-search__wrapper {
width: 100%;
@media (min-width: $breakpoint-small) {
width: auto;
}
}
.claim-search__menus {
background-color: var(--color-card-background);
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding: var(--spacing-m);
padding-bottom: var(--spacing-s);
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
color: var(--color-text-subtitle);
align-items: flex-start;
@media (max-width: $breakpoint-small) {
flex-direction: column;
align-items: flex-start;
@media (min-width: $breakpoint-small) {
flex-direction: row;
}
}
.claim-search__dropdown {
padding: 0 var(--spacing-m);
max-width: 400px;
padding-right: var(--spacing-l);
font-size: var(--font-body);
background-color: var(--color-card-background);
width: var(--option-select-width);
@media (max-width: $breakpoint-small) {
margin-left: 0;
@media (min-width: $breakpoint-small) {
max-width: var(--option-select-width);
}
}
@ -36,31 +43,29 @@
display: flex;
flex-direction: column;
font-size: var(--font-body);
.button {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
width: 100%;
&:not(:first-of-type) {
padding-left: var(--spacing-m);
margin-top: var(--spacing-s);
}
@media (max-width: $breakpoint-small) {
padding-left: 0px;
@media (min-width: $breakpoint-small) {
width: auto;
&:not(:first-of-type) {
margin-top: var(--spacing-s);
}
&:not(:first-of-type) {
padding-left: 0;
margin-top: 0;
padding-left: var(--spacing-m);
}
}
}
.claim-search__filter-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.claim-search__input-special {
font-weight: var(--font-weight-bold);
}
@ -73,6 +78,11 @@
.claim-search__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@media (min-width: $breakpoint-small) {
justify-content: flex-start;
}
}
.claim-search__top > div {
@ -81,7 +91,13 @@
}
}
.claim-search__top-row {
.claim-search__menu-group {
display: flex;
flex-wrap: nowrap;
&:last-of-type {
.button-toggle:last-of-type {
margin-right: 0;
}
}
}

3
ui/scss/component/_form-field.scss
View file

@ -43,12 +43,13 @@ select {
}
select {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
background-image: var(--select-toggle-background);
background-position: 99% center;
background-repeat: no-repeat;
background-size: 1rem;
padding-right: var(--spacing-l);
padding-left: var(--spacing-s);
font-weight: bold;
}
fieldset-group {

1
ui/scss/themes/dark.scss
View file

@ -84,6 +84,7 @@
--color-input-toggle-bg: var(--color-input-bg);
--color-input-toggle-bg-hover: var(--color-secondary);
--color-input-bg-selected: var(--color-primary-alt);
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
// Menu
--color-menu-background: var(--color-header-background);

1
ui/scss/themes/light.scss
View file

@ -49,6 +49,7 @@
--color-blockquote: var(--color-gray-3);
--color-blockquote-bg: var(--color-gray-1);
--color-input-bg-selected: var(--color-primary-alt);
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
--color-spinner-light: #ffffff;
--color-spinner-dark: #212529;