mirror of
https://github.com/hcengineering/platform.git
synced 2025-05-28 10:57:36 +00:00
UBER-675: updated layout of Radio and Circle button (#3638)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
f56d65dc20
commit
18b04717f2
@ -38,6 +38,15 @@
|
||||
--negative-button-pressed: #BF3636;
|
||||
--negative-button-focused: #CA4242;
|
||||
|
||||
--theme-primary-default: #205DC2;
|
||||
--theme-primary-hovered: #3575DE;
|
||||
--theme-primary-pressed: #1C52AB;
|
||||
--theme-primary-disabled: #0000001F;
|
||||
--theme-primary-accented-default: #D3E1F8;
|
||||
--theme-primary-accented-hovered: #BDD2F5;
|
||||
--theme-primary-accented-pressed: #A7C3F1;
|
||||
--theme-primary-accented-focused: #BDD2F5;
|
||||
|
||||
--white-color: #fff;
|
||||
--duotone-color: rgba(126, 134, 158, .25);
|
||||
|
||||
@ -144,7 +153,6 @@
|
||||
|
||||
--theme-editbox-focus-color: rgba(255, 255, 255, .04);
|
||||
--theme-editbox-focus-border: #5190EC;
|
||||
--theme-editbox-default-focus-border: #205DC2; // Light
|
||||
--theme-tablist-color: rgba(0, 0, 0, .02);
|
||||
--theme-tablist-plain-color: #2A64C4; // Light
|
||||
--theme-tablist-plain-divider: rgba(255, 255, 255, .07); // Light invert
|
||||
@ -340,7 +348,6 @@
|
||||
|
||||
--theme-editbox-focus-color: rgba(0, 0, 0, .08);
|
||||
--theme-editbox-focus-border: #5190EC;
|
||||
--theme-editbox-default-focus-border: #205DC2;
|
||||
--theme-tablist-color: rgba(0, 0, 0, .02);
|
||||
--theme-tablist-plain-color: #2A64C4;
|
||||
--theme-tablist-plain-divider: rgba(0, 0, 0, .07);
|
||||
|
||||
@ -303,70 +303,115 @@
|
||||
|
||||
/* Radio Button */
|
||||
.antiRadio {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: min-content;
|
||||
min-width: 0;
|
||||
outline: none;
|
||||
|
||||
& + label {
|
||||
position: relative;
|
||||
margin-top: .375rem;
|
||||
input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.gap-none { margin-bottom: 0; }
|
||||
&.gap-small { margin-bottom: .25rem; }
|
||||
&.gap-medium { margin-bottom: .5rem; }
|
||||
|
||||
label {
|
||||
padding-left: 1.375rem;
|
||||
font-size: .8125rem;
|
||||
color: var(--theme-content-color);
|
||||
|
||||
&.gap-none { margin-bottom: .375rem; }
|
||||
&.gap-small { margin-bottom: .625rem; }
|
||||
&.gap-medium { margin-bottom: .875rem; }
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
top: .0625rem;
|
||||
left: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: var(--theme-button-default);
|
||||
border: 1px solid var(--theme-button-border);
|
||||
}
|
||||
&::after {
|
||||
top: .3125rem;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
background-color: var(--accented-button-color);
|
||||
border-radius: 50%;
|
||||
opacity: .8;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&:not(:disabled, :checked) + label:hover::before { background-color: var(--theme-button-hovered); }
|
||||
&:not(:disabled):active + label::before { background-color: var(--theme-button-pressed); }
|
||||
&:disabled + label::before {
|
||||
background-color: var(--theme-button-border);
|
||||
border-color: transparent;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:focus + label::before { box-shadow: 0 0 0 2px var(--accented-button-outline); }
|
||||
&:focus:not(:checked) + label::before {
|
||||
background-color: var(--theme-button-focused);
|
||||
border-color: var(--theme-button-focused-border);
|
||||
&::before {
|
||||
top: -.1875rem;
|
||||
left: -.1875rem;
|
||||
width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
border: 1px solid var(--theme-primary-default);
|
||||
}
|
||||
&:checked + label::before {
|
||||
background-color: var(--accented-button-default);
|
||||
border-color: var(--accented-button-border);
|
||||
&::after {
|
||||
content: '';
|
||||
top: 0rem;
|
||||
left: 0rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: var(--theme-button-default);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
&:checked:focus + label::before { background-color: var(--accented-button-focused); }
|
||||
&:checked:hover + label::before { background-color: var(--accented-button-hovered); }
|
||||
&:checked:active + label::before { background-color: var(--accented-button-pressed); }
|
||||
&:checked:disabled + label::before {
|
||||
background-color: var(--accented-button-disabled);
|
||||
border-color: var(--theme-button-border);
|
||||
&:not(.disabled, .checked):hover {
|
||||
&::after { background-color: var(--theme-button-hovered); }
|
||||
label { color: var(--theme-caption-color); }
|
||||
}
|
||||
&.checked:not(.disabled):hover {
|
||||
&::after { background-color: var(--theme-primary-hovered); }
|
||||
label {
|
||||
color: var(--theme-caption-color);
|
||||
&::after { opacity: 1; }
|
||||
}
|
||||
}
|
||||
&:focus-within:not(.disabled) {
|
||||
&::before { content: ''; }
|
||||
label { color: var(--theme-caption-color); }
|
||||
&.checked {
|
||||
label::after { opacity: 1; }
|
||||
&:active::after { background-color: var(--theme-primary-pressed); }
|
||||
}
|
||||
}
|
||||
&.checked:not(.disabled) {
|
||||
&::after { background-color: var(--theme-primary-default); }
|
||||
label::after { content: ''; }
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
background-color: var(--theme-primary-disabled);
|
||||
border-color: transparent;
|
||||
}
|
||||
label {
|
||||
color: var(--theme-darker-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.checked label::after {
|
||||
content: '';
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
&:not(.disabled),
|
||||
&:not(.disabled) label { cursor: pointer; }
|
||||
&:not(.disabled):active {
|
||||
&::after { background-color: var(--theme-primary-pressed); }
|
||||
label::after {
|
||||
content: '';
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:checked + label::after { content: ''; }
|
||||
}
|
||||
|
||||
/* StatesBar */
|
||||
@ -811,7 +856,7 @@
|
||||
bottom: -.125rem;
|
||||
left: -.125rem;
|
||||
right: -.125rem;
|
||||
border: 1px solid var(--theme-editbox-default-focus-border);
|
||||
border: 1px solid var(--theme-primary-default);
|
||||
border-radius: .5rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
&:hover { background-color: var(--theme-button-hovered); }
|
||||
&.focusable:focus-within {
|
||||
background-color: var(--theme-button-focused);
|
||||
border-color: var(--theme-editbox-default-focus-border);
|
||||
border-color: var(--theme-primary-default);
|
||||
}
|
||||
&.disabled {
|
||||
color: var(--theme-dark-color);
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import type { Asset } from '@hcengineering/platform'
|
||||
import type { AnySvelteComponent, ButtonSize } from '../types'
|
||||
import Icon from './Icon.svelte'
|
||||
@ -22,16 +23,30 @@
|
||||
export let ghost: boolean = false
|
||||
export let selected: boolean = false
|
||||
export let accented: boolean = false
|
||||
export let disabled: boolean = false
|
||||
export let id: string | undefined = undefined
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function onKeydown (key: KeyboardEvent): void {
|
||||
if (key.code === 'Space') {
|
||||
key.preventDefault()
|
||||
key.stopPropagation()
|
||||
dispatch('selected')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div
|
||||
{id}
|
||||
class="flex-center icon-button icon-{size}"
|
||||
class:selected
|
||||
class:ghost
|
||||
class:accented
|
||||
class:disabled
|
||||
tabindex="0"
|
||||
on:keydown={onKeydown}
|
||||
on:click|stopPropagation
|
||||
on:mousemove
|
||||
>
|
||||
@ -46,14 +61,39 @@
|
||||
|
||||
<style lang="scss">
|
||||
.icon-button {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
color: var(--caption-color);
|
||||
border: 1px solid var(--trans-content-20);
|
||||
color: var(--theme-content-color);
|
||||
background-color: var(--theme-button-default);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
bottom: -0.25rem;
|
||||
left: -0.25rem;
|
||||
right: -0.25rem;
|
||||
border: 1px solid var(--theme-primary-default);
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--button-border-hover);
|
||||
background-color: var(--theme-button-hovered);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--theme-button-pressed);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--theme-button-focused);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
.content {
|
||||
pointer-events: none;
|
||||
@ -69,14 +109,18 @@
|
||||
}
|
||||
}
|
||||
&.accented {
|
||||
color: var(--accented-button-color);
|
||||
background-color: var(--accented-button-default);
|
||||
border-color: var(--accented-button-border);
|
||||
background-color: var(--theme-primary-accented-default);
|
||||
&:hover {
|
||||
background-color: var(--accented-button-hovered);
|
||||
background-color: var(--theme-primary-accented-hovered);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--accented-button-pressed);
|
||||
background-color: var(--theme-primary-accented-pressed);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--theme-primary-accented-focused);
|
||||
}
|
||||
&.disabled {
|
||||
background-color: var(--theme-primary-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,11 +17,15 @@
|
||||
export let rowGap: number = 2.5
|
||||
export let columnGap: number = 1.5
|
||||
export let topGap: boolean = false
|
||||
export let equalHeight: boolean = false
|
||||
export let alignItems: 'start' | 'center' | 'end' | 'stretch' = 'center'
|
||||
|
||||
$: style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}rem; column-gap: ${columnGap}rem;`
|
||||
$: style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}rem; column-gap: ${columnGap}rem;${
|
||||
equalHeight ? ' grid-auto-rows: 1fr;' : ''
|
||||
}`
|
||||
</script>
|
||||
|
||||
<div class="grid" {style} style:margin-top={topGap ? `${rowGap}rem` : 0}>
|
||||
<div class="grid" {style} style:margin-top={topGap ? `${rowGap}rem` : 0} style:align-items={alignItems}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
export let group: any
|
||||
export let value: any
|
||||
export let disabled: boolean = false
|
||||
export let labelOverflow: boolean = false
|
||||
export let label: string | undefined = undefined
|
||||
export let labelIntl: IntlString | undefined = undefined
|
||||
export let labelParams: Record<string, any> | undefined = undefined
|
||||
@ -28,22 +29,32 @@
|
||||
export let gap: 'small' | 'medium' | 'none' = 'none'
|
||||
</script>
|
||||
|
||||
<input
|
||||
class="antiRadio"
|
||||
{id}
|
||||
type="radio"
|
||||
bind:group
|
||||
{value}
|
||||
{disabled}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="antiRadio gap-{gap}"
|
||||
class:disabled
|
||||
class:checked={group === value}
|
||||
tabindex="-1"
|
||||
on:click={() => {
|
||||
if (!disabled && group !== value) action()
|
||||
}}
|
||||
/>
|
||||
<label for={id} class="gap-{gap}">
|
||||
<slot />
|
||||
{#if labelIntl}
|
||||
<Label label={labelIntl} params={labelParams} />
|
||||
{:else}
|
||||
{label}
|
||||
{/if}
|
||||
</label>
|
||||
>
|
||||
<input
|
||||
{id}
|
||||
type="radio"
|
||||
bind:group
|
||||
{value}
|
||||
{disabled}
|
||||
on:click={() => {
|
||||
if (!disabled && group !== value) action()
|
||||
}}
|
||||
/>
|
||||
<label for={id} class:overflow-label={labelOverflow}>
|
||||
<slot />
|
||||
{#if labelIntl}
|
||||
<Label label={labelIntl} params={labelParams} />
|
||||
{:else}
|
||||
{label}
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -111,6 +111,7 @@
|
||||
</script>
|
||||
|
||||
{#if object !== undefined}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<Panel
|
||||
icon={board.icon.Card}
|
||||
title={object?.title}
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
DropdownIntlItem,
|
||||
DropdownLabelsIntl,
|
||||
Grid,
|
||||
Row,
|
||||
Label,
|
||||
NumberInput,
|
||||
RadioButton
|
||||
@ -121,12 +122,13 @@
|
||||
{#if periodType === 'WEEKLY'}
|
||||
<div class="flex-row-center mt-3">
|
||||
<span class="min-w-12"><Label label={calendar.string.On} /></span>
|
||||
<div class="flex-row-center flex-gap-2 ml-1-5">
|
||||
<div class="flex-row-center gap-1-5 ml-1-5">
|
||||
{#each weekdays as day}
|
||||
<CircleButton
|
||||
size="medium"
|
||||
size={'medium'}
|
||||
accented={isActive(day.id, selectedWeekdays)}
|
||||
on:click={() => weekdayClick(day.id)}
|
||||
on:selected={() => weekdayClick(day.id)}
|
||||
>
|
||||
<div class="flex-row-center weekday" slot="content">
|
||||
<Label label={day.label} />
|
||||
@ -139,16 +141,17 @@
|
||||
<div class="flex-row-center mt-3 mb-3 min-h-8">
|
||||
<Label label={calendar.string.Ends} />
|
||||
</div>
|
||||
<Grid columnGap={0.375} rowGap={0.75}>
|
||||
<RadioButton
|
||||
labelIntl={calendar.string.Never}
|
||||
value={'never'}
|
||||
group={selected}
|
||||
action={() => {
|
||||
selected = 'never'
|
||||
}}
|
||||
/>
|
||||
<div />
|
||||
<Grid columnGap={0.375} rowGap={0.75} equalHeight>
|
||||
<Row>
|
||||
<RadioButton
|
||||
labelIntl={calendar.string.Never}
|
||||
value={'never'}
|
||||
group={selected}
|
||||
action={() => {
|
||||
selected = 'never'
|
||||
}}
|
||||
/>
|
||||
</Row>
|
||||
<RadioButton
|
||||
labelIntl={calendar.string.OnUntil}
|
||||
value={'on'}
|
||||
@ -215,7 +218,7 @@
|
||||
|
||||
.weekday {
|
||||
overflow: hidden;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.pool {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user