granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix styles for combobox input

Browse source
This commit is contained in:
Justin Edmund 2023-06-16 17:16:24 -07:00
parent 2d6dff88ff
commit c5500a38a8
5 changed files with 166 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/FilterBar/index.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from 'react'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import classNames from 'classnames'
import equals from 'fast-deep-equal'
@ -140,7 +140,6 @@ const FilterBar = (props: Props) => {
<RaidCombobox
currentRaid={currentRaid}
defaultRaid="all"
showAllRaidsOption={true}
minimal={true}
onChange={raidSelectChanged}

46
components/common/CharLimitedFieldset/index.scss
View file

@ -1,46 +0,0 @@
.Joined {
$offset: 2px;
align-items: center;
background: var(--input-bg);
border-radius: $input-corner;
border: $offset solid transparent;
box-sizing: border-box;
display: flex;
gap: $unit;
padding-top: 2px;
padding-bottom: 2px;
padding-right: calc($unit-2x - $offset);
&.Bound {
background-color: var(--input-bound-bg);
&:hover {
background-color: var(--input-bound-bg-hover);
}
}
&:focus-within {
border: $offset solid $blue;
// box-shadow: 0 2px rgba(255, 255, 255, 1);
}
.Counter {
color: $grey-55;
font-weight: $bold;
line-height: 42px;
}
.Input {
background: transparent;
border: none;
border-radius: 0;
padding: $unit * 1.5 $unit-2x;
padding-left: calc($unit-2x - $offset);
&:focus {
border: none;
outline: none;
}
}
}

126
components/raids/RaidCombobox/index.scss
View file

@ -1,68 +1,5 @@
.DetailsWrapper .PartyDetails.Editable .Raid.SelectTrigger {
display: flex;
padding-top: 10px;
padding-bottom: 11px;
min-height: 51px;
.Value {
display: flex;
gap: $unit-half;
width: 100%;
.Info {
display: flex;
align-items: center;
gap: $unit-half;
flex-grow: 1;
}
.ExtraIndicator {
background: var(--extra-purple-bg);
border-radius: $full-corner;
color: var(--extra-purple-text);
display: flex;
font-weight: $bold;
font-size: $font-tiny;
width: $unit-3x;
height: $unit-3x;
justify-content: center;
align-items: center;
}
.Group,
.Separator {
color: var(--text-tertiary);
}
.Raid.wind {
color: var(--wind-text);
}
.Raid.fire {
color: var(--fire-text);
}
.Raid.water {
color: var(--water-text);
}
.Raid.earth {
color: var(--earth-text);
}
.Raid.dark {
color: var(--dark-text);
}
.Raid.light {
color: var(--light-text);
}
}
}
.Combobox.Raid {
box-sizing: border-box;
/* Temporary values */
.Header {
background: var(--dialog-bg);
@ -174,6 +111,69 @@
}
}
}
.DetailsWrapper .PartyDetails.Editable .Raid.SelectTrigger {
display: flex;
padding-top: 10px;
padding-bottom: 11px;
min-height: 51px;
.Value {
display: flex;
gap: $unit-half;
width: 100%;
.Info {
display: flex;
align-items: center;
gap: $unit-half;
flex-grow: 1;
}
.ExtraIndicator {
background: var(--extra-purple-bg);
border-radius: $full-corner;
color: var(--extra-purple-text);
display: flex;
font-weight: $bold;
font-size: $font-tiny;
width: $unit-3x;
height: $unit-3x;
justify-content: center;
align-items: center;
}
.Group,
.Separator {
color: var(--text-tertiary);
}
.Raid.wind {
color: var(--wind-text);
}
.Raid.fire {
color: var(--fire-text);
}
.Raid.water {
color: var(--water-text);
}
.Raid.earth {
color: var(--earth-text);
}
.Raid.dark {
color: var(--dark-text);
}
.Raid.light {
color: var(--light-text);
}
}
}
.Filters .SelectTrigger.Raid {
& > span {
overflow: hidden;

57
components/raids/RaidCombobox/index.tsx
View file

@ -36,6 +36,34 @@ enum Sort {
DESCENDING,
}
// Set up empty raid for "All raids"
const untitledGroup: RaidGroup = {
id: '0',
name: {
en: '',
ja: '',
},
section: 0,
order: 0,
extra: false,
raids: [],
difficulty: 0,
hl: false,
}
// Set up empty raid for "All raids"
const allRaidsOption: Raid = {
id: '0',
name: {
en: 'All battles',
ja: '全てのバトル',
},
group: untitledGroup,
slug: 'all',
level: 0,
element: 0,
}
const RaidCombobox = (props: Props) => {
// Set up router for locale
const router = useRouter()
@ -75,12 +103,15 @@ const RaidCombobox = (props: Props) => {
if (appState.party.raid) {
setCurrentRaid(appState.party.raid)
setCurrentSection(appState.party.raid.group.section)
} else if (props.showAllRaidsOption && !currentRaid) {
setCurrentRaid(allRaidsOption)
}
}, [])
// Set current raid and section when the current raid changes
useEffect(() => {
if (props.currentRaid) {
console.log('We are here with a raid')
setCurrentRaid(props.currentRaid)
setCurrentSection(props.currentRaid.group.section)
}
@ -224,7 +255,9 @@ const RaidCombobox = (props: Props) => {
// Toggle the open state of the combobox
function toggleOpen() {
if (open) {
if (currentRaid) setCurrentSection(currentRaid.group.section)
if (currentRaid && currentRaid.slug !== 'all') {
setCurrentSection(currentRaid.group.section)
}
setScrolled(false)
}
setOpen(!open)
@ -287,6 +320,26 @@ const RaidCombobox = (props: Props) => {
)
}
// Render the ungrouped raid group
function renderUngroupedRaids() {
// Render the Untitled group with the allRaids inside of it first if the option is enabled
if (props.showAllRaidsOption) {
const ungroupedRaids = generateRaidItems([allRaidsOption])
return (
<CommandGroup
data-section={untitledGroup.section}
className={classNames({
CommandGroup: true,
})}
key="ungrouped-raids"
>
{ungroupedRaids}
</CommandGroup>
)
}
}
// Generates a list of RaidItem components from the specified raids
function generateRaidItems(raids: Raid[]) {
return raids
@ -361,7 +414,6 @@ const RaidCombobox = (props: Props) => {
}
// Renders a Button for sorting raids and a Tooltip for explaining what it does.
function renderSortButton() {
return (
<Tooltip
@ -493,6 +545,7 @@ const RaidCombobox = (props: Props) => {
tabIndex={6}
onKeyDown={handleListKeyDown}
>
{renderUngroupedRaids()}
{renderRaidSections()}
</div>
</Command>

47
styles/globals.scss
View file

@ -306,3 +306,50 @@ i.tag {
grid-template-columns: 1fr 1fr;
}
}
.Joined {
$offset: 2px;
align-items: center;
background: var(--input-bg);
border-radius: $input-corner;
border: $offset solid transparent;
box-sizing: border-box;
display: flex;
gap: $unit;
padding-top: 2px;
padding-bottom: 2px;
padding-right: calc($unit-2x - $offset);
&.Bound {
background-color: var(--input-bound-bg);
&:hover {
background-color: var(--input-bound-bg-hover);
}
}
&:focus-within {
border: $offset solid $blue;
// box-shadow: 0 2px rgba(255, 255, 255, 1);
}
.Counter {
color: $grey-55;
font-weight: $bold;
line-height: 42px;
}
.Input {
background: transparent;
border: none;
border-radius: 0;
padding: $unit * 1.5 $unit-2x;
padding-left: calc($unit-2x - $offset);
&:focus {
border: none;
outline: none;
}
}
}