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 { usePopper } from 'react-popper';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps extends IEditorComponentProps {}
|
||||
|
||||
|
|
@ -17,9 +18,8 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
|
|||
|
||||
return (
|
||||
<Button
|
||||
color={data.is_promoted ? 'primary' : 'secondary'}
|
||||
color={data.is_promoted ? 'primary' : 'lab'}
|
||||
type="button"
|
||||
iconLeft={data.is_promoted ? 'waves' : 'lab'}
|
||||
size="giant"
|
||||
label={
|
||||
data.is_promoted
|
||||
|
|
@ -27,8 +27,17 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
|
|||
: 'Видно только сотрудникам в лаборатории'
|
||||
}
|
||||
onClick={onChange}
|
||||
className={styles.button}
|
||||
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";
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow();
|
||||
@include editor_round_button();
|
||||
|
||||
transition: all 0.5s;
|
||||
fill: $content_bg;
|
||||
background-color: $olive;
|
||||
|
||||
&.promoted {
|
||||
background-color: lighten($content_bg, 4%);
|
||||
fill: $red;
|
||||
@keyframes move_1 {
|
||||
0% {
|
||||
transform: scale(0) translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
50% {
|
||||
transform: scale(1) translate(5px, -5px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
100% {
|
||||
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
|
||||
> & {
|
||||
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
|
||||
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
|
||||
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
|
||||
iconLeft?: IIcon;
|
||||
iconRight?: IIcon;
|
||||
title?: string;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
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;
|
||||
|
||||
@include outer_shadow();
|
||||
|
|
@ -77,12 +77,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:global(.red) {
|
||||
fill: $red;
|
||||
stroke: $red;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&:global(.stretchy) {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -123,14 +117,6 @@
|
|||
padding-right: $gap;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: $red_gradient;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: $green_gradient;
|
||||
}
|
||||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
|
||||
|
|
@ -231,3 +217,15 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: $red;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: $wisegreen;
|
||||
}
|
||||
|
||||
.lab {
|
||||
background: $blue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,11 +95,7 @@ const EditorDialogUnconnected: FC<IProps> = ({
|
|||
maxLength={256}
|
||||
/>
|
||||
|
||||
<Button
|
||||
title="Сохранить"
|
||||
iconRight="check"
|
||||
color={data.is_promoted ? 'primary' : 'secondary'}
|
||||
/>
|
||||
<Button title="Сохранить" iconRight="check" color={data.is_promoted ? 'primary' : 'lab'} />
|
||||
</Group>
|
||||
</Padder>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -257,12 +257,12 @@ const Sprites: FC<{}> = () => (
|
|||
|
||||
<g id="waves" stroke="none">
|
||||
<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 id="lab" stroke="none">
|
||||
<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 id="search">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
$red: #ff3344;
|
||||
$yellow: #ffd60f;
|
||||
$dark_blue: #3c75ff;
|
||||
$blue: #3ca1ff;
|
||||
$blue: #582cd0;
|
||||
$green: #00d2b9;
|
||||
//$green: #00503c;
|
||||
$olive: #8bc12a;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue