Fix several call tabs UI issues
This commit is contained in:
parent
df0be46c3c
commit
c26cb0a3e4
4 changed files with 55 additions and 50 deletions
|
@ -50,6 +50,10 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__top-bar-title {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&__new-story {
|
&__new-story {
|
||||||
&__button {
|
&__button {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
@ -34,12 +34,7 @@
|
||||||
&__add-story__button {
|
&__add-story__button {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
@include light-theme {
|
@include color-svg('../images/icons/v3/plus/plus.svg', $color-white);
|
||||||
@include color-svg('../images/icons/v3/plus/plus.svg', $color-black);
|
|
||||||
}
|
|
||||||
@include dark-theme {
|
|
||||||
@include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-15);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@include keyboard-mode {
|
@include keyboard-mode {
|
||||||
|
|
|
@ -893,49 +893,55 @@ export function SendStoryModal({
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="SendStoryModal__top-bar">
|
<div className="SendStoryModal__top-bar">
|
||||||
{i18n('icu:stories')}
|
<div className="SendStoryModal__top-bar-title">
|
||||||
<ContextMenu
|
{i18n('icu:stories')}
|
||||||
aria-label={i18n('icu:SendStoryModal__new')}
|
</div>
|
||||||
i18n={i18n}
|
<div className="SendStoryModal__top-bar-actions">
|
||||||
menuOptions={[
|
<ContextMenu
|
||||||
{
|
aria-label={i18n('icu:SendStoryModal__new')}
|
||||||
label: i18n('icu:SendStoryModal__new-custom--title'),
|
i18n={i18n}
|
||||||
description: i18n(
|
menuOptions={[
|
||||||
'icu:SendStoryModal__new-custom--description'
|
{
|
||||||
),
|
label: i18n('icu:SendStoryModal__new-custom--title'),
|
||||||
icon: 'SendStoryModal__icon--custom',
|
description: i18n(
|
||||||
onClick: () => setPage(Page.ChooseViewers),
|
'icu:SendStoryModal__new-custom--description'
|
||||||
},
|
),
|
||||||
{
|
icon: 'SendStoryModal__icon--custom',
|
||||||
label: i18n('icu:SendStoryModal__new-group--title'),
|
onClick: () => setPage(Page.ChooseViewers),
|
||||||
description: i18n('icu:SendStoryModal__new-group--description'),
|
},
|
||||||
icon: 'SendStoryModal__icon--group',
|
{
|
||||||
onClick: () => setPage(Page.ChooseGroups),
|
label: i18n('icu:SendStoryModal__new-group--title'),
|
||||||
},
|
description: i18n(
|
||||||
]}
|
'icu:SendStoryModal__new-group--description'
|
||||||
moduleClassName="SendStoryModal__new-story"
|
),
|
||||||
popperOptions={{
|
icon: 'SendStoryModal__icon--group',
|
||||||
placement: 'bottom',
|
onClick: () => setPage(Page.ChooseGroups),
|
||||||
strategy: 'absolute',
|
},
|
||||||
}}
|
]}
|
||||||
theme={theme === ThemeType.dark ? Theme.Dark : Theme.Light}
|
moduleClassName="SendStoryModal__new-story"
|
||||||
>
|
popperOptions={{
|
||||||
{({ openMenu, onKeyDown, ref, menuNode }) => (
|
placement: 'bottom',
|
||||||
<div>
|
strategy: 'absolute',
|
||||||
<Button
|
}}
|
||||||
ref={ref}
|
theme={theme === ThemeType.dark ? Theme.Dark : Theme.Light}
|
||||||
className="SendStoryModal__new-story__button"
|
>
|
||||||
variant={ButtonVariant.Secondary}
|
{({ openMenu, onKeyDown, ref, menuNode }) => (
|
||||||
size={ButtonSize.Small}
|
<div>
|
||||||
onClick={openMenu}
|
<Button
|
||||||
onKeyDown={onKeyDown}
|
ref={ref}
|
||||||
>
|
className="SendStoryModal__new-story__button"
|
||||||
{i18n('icu:SendStoryModal__new')}
|
variant={ButtonVariant.Secondary}
|
||||||
</Button>
|
size={ButtonSize.Small}
|
||||||
{menuNode}
|
onClick={openMenu}
|
||||||
</div>
|
onKeyDown={onKeyDown}
|
||||||
)}
|
>
|
||||||
</ContextMenu>
|
{i18n('icu:SendStoryModal__new')}
|
||||||
|
</Button>
|
||||||
|
{menuNode}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ContextMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{fullList.map(listOrGroup =>
|
{fullList.map(listOrGroup =>
|
||||||
// only group has a type field
|
// only group has a type field
|
||||||
|
|
|
@ -93,7 +93,7 @@ function searchConversations(
|
||||||
searchTerm: string,
|
searchTerm: string,
|
||||||
regionCode: string | undefined
|
regionCode: string | undefined
|
||||||
): ReadonlyArray<Pick<Fuse.FuseResult<ConversationType>, 'item' | 'score'>> {
|
): ReadonlyArray<Pick<Fuse.FuseResult<ConversationType>, 'item' | 'score'>> {
|
||||||
const maybeCommand = searchTerm.match(/^!([^\s]+):(.*)$/);
|
const maybeCommand = searchTerm.match(/^!([^\s:]+)(?::(.*))?$/);
|
||||||
if (maybeCommand) {
|
if (maybeCommand) {
|
||||||
const [, commandName, query] = maybeCommand;
|
const [, commandName, query] = maybeCommand;
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue