Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

styled the default button and the mobile dropdown

Browse Source
This commit is contained in:
t1enne 2022-10-22 22:36:32 +02:00
parent b7795f275c
commit bddb895189
4 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.module.scss
View File

@ -7,8 +7,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
padding-bottom: 16px; // to match antd nav margin-bottom
button { button {
color: currentColor; height: 100%;
} }
} }
@ -19,7 +20,4 @@
.menu { .menu {
color: currentColor; color: currentColor;
// border: none;
// background-color: transparent;
// margin: 8px;
} }

18
web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react'; import { FC } from 'react';
import { Button, Dropdown, Menu, Space } from 'antd'; import { Button, Dropdown, Menu } from 'antd';
import { DownOutlined, StarOutlined } from '@ant-design/icons'; import { DashOutlined, EllipsisOutlined } from '@ant-design/icons';
import styles from './ActionButtonMenu.module.scss'; import styles from './ActionButtonMenu.module.scss';
import { ExternalAction } from '../../../interfaces/external-action'; import { ExternalAction } from '../../../interfaces/external-action';
@ -31,14 +31,14 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
const menu = <Menu items={items} onClick={onMenuClick} />; const menu = <Menu items={items} onClick={onMenuClick} />;
return ( return (
<Dropdown overlay={menu} trigger={['click']} className={styles.menu}> <Dropdown overlay={menu} placement="bottomRight" trigger={['click']} className={styles.menu}>
<div className={styles.buttonWrap}> <div className={styles.buttonWrap}>
<Button type="default" onClick={e => e.preventDefault()}> <Button
<Space> type="default"
<StarOutlined /> onClick={e => e.preventDefault()}
<DownOutlined /> size="large"
</Space> icon={<EllipsisOutlined size={6} style={{ rotate: '90deg' }} />}
</Button> />
</div> </div>
</Dropdown> </Dropdown>
); );

2
web/components/ui/Content/Content.tsx
View File

@ -159,7 +159,7 @@ const MobileContent = ({
const replacementTabBar = (props, DefaultTabBar) => ( const replacementTabBar = (props, DefaultTabBar) => (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
<DefaultTabBar {...props} style={{ width: '80%' }} /> <DefaultTabBar {...props} style={{ width: '85%' }} />
<ActionButtonMenu actions={actions} externalActionSelected={setExternalActionToDisplay} /> <ActionButtonMenu actions={actions} externalActionSelected={setExternalActionToDisplay} />
</div> </div>
); );

50
web/styles/ant-overrides.scss
View File

@ -1,5 +1,5 @@
/* ------------------------- // /* ------------------------- //
HEADER HEADER
// ------------------------- */ // ------------------------- */
.ant-layout-header { .ant-layout-header {
@ -7,18 +7,42 @@
height: auto; height: auto;
} }
/* ------------------------- // /* ------------------------- //
BUTTONS BUTTONS
// ------------------------- */ // ------------------------- */
.ant-btn { .ant-btn[disabled] {
height: 2rem; background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
&:hover,
&:focus {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
}
}
.ant-btn-default {
color: currentColor;
border-width: 2px;
border-color: transparent;
border-radius: .15rem;
background-color: rgba(0,0,0,.1);
&:hover,
&:focus {
color: currentColor;
border-color: rgba(0,0,0,.55);
background-color: var(--theme-color-components-secondary-button-background);
}
}
.ant-btn-primary {
height: 2rem;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: bold; font-weight: bold;
border-width: 2px; border-width: 2px;
border-radius: var(--theme-rounded-corners); border-radius: var(--theme-rounded-corners);
color: var(--theme-color-components-primary-button-text); color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-action);
&:hover, &:hover,
&:focus { &:focus {
@ -33,20 +57,6 @@
&[ant-click-animating-without-extra-node]:after { &[ant-click-animating-without-extra-node]:after {
animation: 0s !important; animation: 0s !important;
} }
}
.ant-btn[disabled] {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
&:hover,
&:focus {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
}
}
.ant-btn-primary {
background-color: var(--theme-color-components-primary-button-background); background-color: var(--theme-color-components-primary-button-background);
color: var(--theme-color-components-primary-button-text); color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-components-primary-button-background); border-color: var(--theme-color-components-primary-button-background);
@ -84,7 +94,7 @@
} }
/* ------------------------- // /* ------------------------- //
DROPDOWN DROPDOWN
// ------------------------- */ // ------------------------- */
.ant-dropdown-menu { .ant-dropdown-menu {