From 666d241f1195bc7a93902075f7f18322233698c9 Mon Sep 17 00:00:00 2001 From: bakaneko Date: Wed, 16 Apr 2025 15:06:25 +0900 Subject: [PATCH 1/5] move user tag to component --- resources/js/beatmapsets-show/controller.ts | 4 +-- resources/js/beatmapsets-show/info.tsx | 8 ++---- resources/js/beatmapsets-show/user-tag.tsx | 28 +++++++++++++++++++++ resources/js/interfaces/tag-json.ts | 2 ++ 4 files changed, 33 insertions(+), 9 deletions(-) create mode 100644 resources/js/beatmapsets-show/user-tag.tsx diff --git a/resources/js/beatmapsets-show/controller.ts b/resources/js/beatmapsets-show/controller.ts index 8216dd4c523..0cc58aa1b03 100644 --- a/resources/js/beatmapsets-show/controller.ts +++ b/resources/js/beatmapsets-show/controller.ts @@ -2,7 +2,7 @@ // See the LICENCE file in the repository root for full licence text. import { BeatmapsetJsonForShow } from 'interfaces/beatmapset-extended-json'; -import TagJson from 'interfaces/tag-json'; +import TagJson, { TagJsonWithCount } from 'interfaces/tag-json'; import UserJson from 'interfaces/user-json'; import { keyBy } from 'lodash'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; @@ -25,8 +25,6 @@ interface State { showingNsfwWarning: boolean; } -type TagJsonWithCount = TagJson & { count: number }; - export default class Controller { @observable hoveredBeatmap: null | BeatmapJsonForBeatmapsetShow = null; @observable state: State; diff --git a/resources/js/beatmapsets-show/info.tsx b/resources/js/beatmapsets-show/info.tsx index a986e7dec1d..0ab68e1c87e 100644 --- a/resources/js/beatmapsets-show/info.tsx +++ b/resources/js/beatmapsets-show/info.tsx @@ -19,6 +19,7 @@ import { trans } from 'utils/lang'; import { present } from 'utils/string'; import Controller from './controller'; import MetadataEditor from './metadata-editor'; +import UserTag from './user-tag'; interface Props { controller: Controller; @@ -195,12 +196,7 @@ export default class Info extends React.Component {
{this.controller.tags.userTags.map((tag) => ( - - {tag.name} - + {' '} ))} diff --git a/resources/js/beatmapsets-show/user-tag.tsx b/resources/js/beatmapsets-show/user-tag.tsx new file mode 100644 index 00000000000..b13b3827694 --- /dev/null +++ b/resources/js/beatmapsets-show/user-tag.tsx @@ -0,0 +1,28 @@ +// Copyright (c) ppy Pty Ltd . Licensed under the GNU Affero General Public License v3.0. +// See the LICENCE file in the repository root for full licence text. + +import { TagJsonWithCount } from 'interfaces/tag-json'; +import { route } from 'laroute'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { makeSearchQueryOption } from 'utils/beatmapset-helper'; + +interface Props { + tag: TagJsonWithCount; +} + +@observer +export default class UserTag extends React.PureComponent { + render() { + return ( + + {this.props.tag.name} + + ); + } +} + + diff --git a/resources/js/interfaces/tag-json.ts b/resources/js/interfaces/tag-json.ts index 5d1352a7a4b..0175a031b84 100644 --- a/resources/js/interfaces/tag-json.ts +++ b/resources/js/interfaces/tag-json.ts @@ -6,3 +6,5 @@ export default interface TagJson { id: number; name: string; } + +export type TagJsonWithCount = TagJson & { count: number }; From c767bfe760371de3c30de8df5775ebf19099a9e0 Mon Sep 17 00:00:00 2001 From: bakaneko Date: Wed, 16 Apr 2025 17:06:34 +0900 Subject: [PATCH 2/5] new user tag style --- resources/css/bem-index.less | 1 + resources/css/bem/beatmapset-info.less | 6 +++++ resources/css/bem/user-tag.less | 27 ++++++++++++++++++++++ resources/js/beatmapsets-show/info.tsx | 7 ++---- resources/js/beatmapsets-show/user-tag.tsx | 24 ++++++++++++++++--- 5 files changed, 57 insertions(+), 8 deletions(-) create mode 100644 resources/css/bem/user-tag.less diff --git a/resources/css/bem-index.less b/resources/css/bem-index.less index df26c40257a..64dc26d007f 100644 --- a/resources/css/bem-index.less +++ b/resources/css/bem-index.less @@ -425,6 +425,7 @@ @import "bem/user-search-card"; @import "bem/user-session-list"; @import "bem/user-session-list-session"; +@import "bem/user-tag"; @import "bem/user-verification"; @import "bem/user-verification-popup"; @import "bem/username-change"; diff --git a/resources/css/bem/beatmapset-info.less b/resources/css/bem/beatmapset-info.less index 41f6705dafc..32635bbf49e 100644 --- a/resources/css/bem/beatmapset-info.less +++ b/resources/css/bem/beatmapset-info.less @@ -104,4 +104,10 @@ pointer-events: none; } } + + &__tags { + display: flex; + flex-wrap: wrap; + gap: 5px; + } } diff --git a/resources/css/bem/user-tag.less b/resources/css/bem/user-tag.less new file mode 100644 index 00000000000..1b4017a1deb --- /dev/null +++ b/resources/css/bem/user-tag.less @@ -0,0 +1,27 @@ +// Copyright (c) ppy Pty Ltd . Licensed under the GNU Affero General Public License v3.0. +// See the LICENCE file in the repository root for full licence text. + +.user-tag { + .default-border-radius(); + .link-plain(); + .link-white(); + display: flex; + overflow: hidden; + + &__item { + padding: 3px 6px; + + &--category { + background: #444; + color: #aaa; + } + + &--count { + background: #222; + } + + &--name { + background: #555; + } + } +} diff --git a/resources/js/beatmapsets-show/info.tsx b/resources/js/beatmapsets-show/info.tsx index 0ab68e1c87e..be314719876 100644 --- a/resources/js/beatmapsets-show/info.tsx +++ b/resources/js/beatmapsets-show/info.tsx @@ -193,12 +193,9 @@ export default class Info extends React.Component {

{trans('beatmapsets.show.info.user_tags')}

-
+
{this.controller.tags.userTags.map((tag) => ( - - - {' '} - + ))}
diff --git a/resources/js/beatmapsets-show/user-tag.tsx b/resources/js/beatmapsets-show/user-tag.tsx index b13b3827694..0202c2459d4 100644 --- a/resources/js/beatmapsets-show/user-tag.tsx +++ b/resources/js/beatmapsets-show/user-tag.tsx @@ -13,13 +13,31 @@ interface Props { @observer export default class UserTag extends React.PureComponent { + private readonly category; + private readonly name; + + private get url() { + return route('beatmapsets.index', { q: makeSearchQueryOption('tag', this.props.tag.name) }); + } + + constructor(props: Props) { + super(props); + + const split = props.tag.name.split('/'); + this.category = split[0]; + this.name = split[1]; + } + render() { return ( - {this.props.tag.name} + {this.category} + {this.name} + {this.props.tag.count} ); } From 109b0ca0794ee9447399a2494ec26938177b2288 Mon Sep 17 00:00:00 2001 From: bakaneko Date: Wed, 16 Apr 2025 18:39:41 +0900 Subject: [PATCH 3/5] try fit longer tags in --- resources/css/bem/beatmapset-info.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/bem/beatmapset-info.less b/resources/css/bem/beatmapset-info.less index 32635bbf49e..c1d02b231b0 100644 --- a/resources/css/bem/beatmapset-info.less +++ b/resources/css/bem/beatmapset-info.less @@ -18,7 +18,7 @@ @media @desktop { padding: 15px @gutter-beatmapset-desktop 0; - grid-template-columns: 1fr 175px @beatmapset-float-box-width; + grid-template-columns: 1fr minmax(175px, min-content) @beatmapset-float-box-width; } &__box { From e818d52e0d1defda151b8d4e821e6651e7ecae7a Mon Sep 17 00:00:00 2001 From: bakaneko Date: Wed, 16 Apr 2025 18:46:16 +0900 Subject: [PATCH 4/5] doesn't need observer --- resources/js/beatmapsets-show/user-tag.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/resources/js/beatmapsets-show/user-tag.tsx b/resources/js/beatmapsets-show/user-tag.tsx index 0202c2459d4..e39f40842af 100644 --- a/resources/js/beatmapsets-show/user-tag.tsx +++ b/resources/js/beatmapsets-show/user-tag.tsx @@ -3,7 +3,6 @@ import { TagJsonWithCount } from 'interfaces/tag-json'; import { route } from 'laroute'; -import { observer } from 'mobx-react'; import * as React from 'react'; import { makeSearchQueryOption } from 'utils/beatmapset-helper'; @@ -11,7 +10,6 @@ interface Props { tag: TagJsonWithCount; } -@observer export default class UserTag extends React.PureComponent { private readonly category; private readonly name; From 5b761a9d5c3b7ae1bfe17411213dd059bae9aa9e Mon Sep 17 00:00:00 2001 From: bakaneko Date: Thu, 17 Apr 2025 16:47:48 +0900 Subject: [PATCH 5/5] use themed colours --- resources/css/bem/user-tag.less | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/resources/css/bem/user-tag.less b/resources/css/bem/user-tag.less index 1b4017a1deb..3e8336a576b 100644 --- a/resources/css/bem/user-tag.less +++ b/resources/css/bem/user-tag.less @@ -4,24 +4,23 @@ .user-tag { .default-border-radius(); .link-plain(); - .link-white(); display: flex; overflow: hidden; + color: hsl(var(--hsl-c1)); &__item { padding: 3px 6px; &--category { - background: #444; - color: #aaa; + background: hsl(var(--hsl-b3)); } &--count { - background: #222; + background: hsl(var(--hsl-b5)); } &--name { - background: #555; + background: hsl(var(--hsl-b2)); } } }