mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
#23 changed promoted button appearance
This commit is contained in:
Fedor Katurov
parent
82aeb7f147
commit
32aaa3f794
7 changed files with 86 additions and 83 deletions
|
|
@ -1,7 +1,8 @@
|
||||||
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
import React, { FC, useCallback } from 'react';
|
||||||
import { IEditorComponentProps } from '~/redux/node/types';
|
import { IEditorComponentProps } from '~/redux/node/types';
|
||||||
import { usePopper } from 'react-popper';
|
|
||||||
import { Button } from '~/components/input/Button';
|
import { Button } from '~/components/input/Button';
|
||||||
|
import { Icon } from '~/components/input/Icon';
|
||||||
|
import styles from './styles.module.scss';
|
||||||
|
|
||||||
interface IProps extends IEditorComponentProps {}
|
interface IProps extends IEditorComponentProps {}
|
||||||
|
|
||||||
|
|
@ -17,9 +18,8 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
color={data.is_promoted ? 'primary' : 'secondary'}
|
color={data.is_promoted ? 'primary' : 'lab'}
|
||||||
type="button"
|
type="button"
|
||||||
iconLeft={data.is_promoted ? 'waves' : 'lab'}
|
|
||||||
size="giant"
|
size="giant"
|
||||||
label={
|
label={
|
||||||
data.is_promoted
|
data.is_promoted
|
||||||
|
|
@ -27,8 +27,17 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
|
||||||
: 'Видно только сотрудникам в лаборатории'
|
: 'Видно только сотрудникам в лаборатории'
|
||||||
}
|
}
|
||||||
onClick={onChange}
|
onClick={onChange}
|
||||||
|
className={styles.button}
|
||||||
round
|
round
|
||||||
/>
|
>
|
||||||
|
{data.is_promoted ? (
|
||||||
|
<Icon icon="waves" size={24} />
|
||||||
|
) : (
|
||||||
|
<div className={styles.lab_wrapper}>
|
||||||
|
<Icon icon="lab" size={24} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,63 @@
|
||||||
@import "src/styles/variables";
|
@import "src/styles/variables";
|
||||||
|
|
||||||
.wrap {
|
@keyframes move_1 {
|
||||||
@include outer_shadow();
|
0% {
|
||||||
@include editor_round_button();
|
transform: scale(0) translate(0, 0);
|
||||||
|
opacity: 0;
|
||||||
transition: all 0.5s;
|
|
||||||
fill: $content_bg;
|
|
||||||
background-color: $olive;
|
|
||||||
|
|
||||||
&.promoted {
|
|
||||||
background-color: lighten($content_bg, 4%);
|
|
||||||
fill: $red;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
50% {
|
||||||
|
transform: scale(1) translate(5px, -5px);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.tooltip {
|
100% {
|
||||||
opacity: 1;
|
transform: scale(1.2) translate(-5px, -10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes move_2 {
|
||||||
|
0% {
|
||||||
|
transform: scale(0) translate(0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1) translate(-5px, -5px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1.6) translate(5px, -10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.lab_wrapper {
|
||||||
|
position: relative;
|
||||||
|
bottom: -2px;
|
||||||
|
|
||||||
|
.button:hover & {
|
||||||
|
&:before,&:after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 10px;
|
||||||
|
width: 2px;
|
||||||
|
height: 2px;
|
||||||
|
box-shadow: white 0 0 0 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
animation: move_1 0.5s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
animation: move_2 0.5s -0.25s infinite linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
border-radius: 2px;
|
|
||||||
background: darken($content_bg, 6%);
|
|
||||||
padding: $gap;
|
|
||||||
position: absolute;
|
|
||||||
font: $font_12_semibold;
|
|
||||||
bottom: 100%;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(0, -$gap);
|
|
||||||
text-align: center;
|
|
||||||
touch-action: none;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
width: 100px;
|
|
||||||
user-select: none;
|
|
||||||
transition: all 0.1s;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ type IButtonProps = DetailedHTMLProps<
|
||||||
HTMLButtonElement
|
HTMLButtonElement
|
||||||
> & {
|
> & {
|
||||||
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
|
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
|
||||||
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
|
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
|
||||||
iconLeft?: IIcon;
|
iconLeft?: IIcon;
|
||||||
iconRight?: IIcon;
|
iconRight?: IIcon;
|
||||||
title?: string;
|
title?: string;
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
filter: grayscale(0);
|
filter: grayscale(0);
|
||||||
|
|
||||||
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
|
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
@ -77,12 +77,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.red) {
|
|
||||||
fill: $red;
|
|
||||||
stroke: $red;
|
|
||||||
color: $red;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:global(.stretchy) {
|
&:global(.stretchy) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -123,14 +117,6 @@
|
||||||
padding-right: $gap;
|
padding-right: $gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.primary {
|
|
||||||
background: $red_gradient;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.secondary {
|
|
||||||
background: $green_gradient;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.outline {
|
&.outline {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
|
box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
|
||||||
|
|
@ -231,3 +217,15 @@
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
background: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
background: $wisegreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lab {
|
||||||
|
background: $blue;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -95,11 +95,7 @@ const EditorDialogUnconnected: FC<IProps> = ({
|
||||||
maxLength={256}
|
maxLength={256}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Button
|
<Button title="Сохранить" iconRight="check" color={data.is_promoted ? 'primary' : 'lab'} />
|
||||||
title="Сохранить"
|
|
||||||
iconRight="check"
|
|
||||||
color={data.is_promoted ? 'primary' : 'secondary'}
|
|
||||||
/>
|
|
||||||
</Group>
|
</Group>
|
||||||
</Padder>
|
</Padder>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -257,12 +257,12 @@ const Sprites: FC<{}> = () => (
|
||||||
|
|
||||||
<g id="waves" stroke="none">
|
<g id="waves" stroke="none">
|
||||||
<path fill="none" d="M0 0h24v24H0V0z" />
|
<path fill="none" d="M0 0h24v24H0V0z" />
|
||||||
<path d="M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z"/>
|
<path d="M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z" />
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g id="lab" stroke="none">
|
<g id="lab" stroke="none">
|
||||||
<path fill="none" d="M0 0h24v24H0V0z" />
|
<path fill="none" d="M0 0h24v24H0V0z" />
|
||||||
<path d="M13,11.33L18,18H6l5-6.67V6h2 M15.96,4H8.04C7.62,4,7.39,4.48,7.65,4.81L9,6.5v4.17L3.2,18.4C2.71,19.06,3.18,20,4,20h16 c0.82,0,1.29-0.94,0.8-1.6L15,10.67V6.5l1.35-1.69C16.61,4.48,16.38,4,15.96,4L15.96,4z"/>
|
<path d="M13,11.33L18,18H6l5-6.67V6h2 M15.96,4H8.04C7.62,4,7.39,4.48,7.65,4.81L9,6.5v4.17L3.2,18.4C2.71,19.06,3.18,20,4,20h16 c0.82,0,1.29-0.94,0.8-1.6L15,10.67V6.5l1.35-1.69C16.61,4.48,16.38,4,15.96,4L15.96,4z" />
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<g id="search">
|
<g id="search">
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
$red: #ff3344;
|
$red: #ff3344;
|
||||||
$yellow: #ffd60f;
|
$yellow: #ffd60f;
|
||||||
$dark_blue: #3c75ff;
|
$dark_blue: #3c75ff;
|
||||||
$blue: #3ca1ff;
|
$blue: #582cd0;
|
||||||
$green: #00d2b9;
|
$green: #00d2b9;
|
||||||
//$green: #00503c;
|
//$green: #00503c;
|
||||||
$olive: #8bc12a;
|
$olive: #8bc12a;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue