Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-31 11:09:43 +02:00
Code Issues Releases Activity

Background gradients, migrate from CSS to SCSS, remove !important

Browse source
This commit is contained in:
Maksim Eltyshev 2020-05-29 19:31:19 +05:00
parent 196121bd38
commit ff95a12578
312 changed files with 4295 additions and 2989 deletions
Download patch file Download diff file Expand all files Collapse all files

30
client/src/components/Timer/Timer.jsx
View file

@ -1,3 +1,4 @@
import upperFirst from 'lodash/upperFirst';
import React, { useCallback, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@ -5,7 +6,7 @@ import { useForceUpdate, usePrevious } from '../../lib/hooks';
import { formatTimer } from '../../utils/timer';
import styles from './Timer.module.css';
import styles from './Timer.module.scss';
const SIZES = {
TINY: 'tiny',
@ -13,25 +14,6 @@ const SIZES = {
MEDIUM: 'medium',
};
// TODO: move to styles
const STYLES = {
tiny: {
fontSize: '12px',
lineHeight: '20px',
padding: '0px 6px',
},
small: {
fontSize: '12px',
lineHeight: '20px',
padding: '2px 6px',
},
medium: {
lineHeight: '20px',
padding: '6px 12px',
textDecoration: 'underline',
},
};
const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
const prevStartedAt = usePrevious(startedAt);
const forceUpdate = useForceUpdate();
@ -66,7 +48,13 @@ const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
);
const contentNode = (
<span className={classNames(styles.wrapper, onClick && styles.hoverable)} style={STYLES[size]}>
<span
className={classNames(
styles.wrapper,
styles[`wrapper${upperFirst(size)}`],
onClick && styles.wrapperHoverable,
)}
>
{formatTimer({ startedAt, total })}
</span>
);

25
client/src/components/Timer/Timer.module.css
View file

@ -1,25 +0,0 @@
.button {
background: transparent;
border: none;
cursor: pointer;
display: inline-block;
outline: none;
padding: 0;
}
.hoverable:hover {
background: #d2d8dc;
color: #17394d;
}
.wrapper {
background: #f3f4f6;
border: none;
border-radius: 3px;
color: #7e8ea3;
display: inline-block;
outline: none;
text-align: left;
transition: background 0.3s ease;
vertical-align: top;
}

47
client/src/components/Timer/Timer.module.scss Normal file
View file

@ -0,0 +1,47 @@
:global(#app) {
.button {
background: transparent;
border: none;
cursor: pointer;
display: inline-block;
outline: none;
padding: 0;
}
.wrapper {
background: #f3f4f6;
border: none;
border-radius: 3px;
color: #7e8ea3;
display: inline-block;
outline: none;
text-align: left;
transition: background 0.3s ease;
vertical-align: top;
}
.wrapperHoverable:hover {
background: #d2d8dc;
color: #17394d;
}
/* Sizes */
.wrapperTiny {
font-size: 12px;
line-height: 20px;
padding: 0 6px;
}
.wrapperSmall {
font-size: 12px;
line-height: 20px;
padding: 2px 6px;
}
.wrapperMedium {
line-height: 20px;
padding: 6px 12px;
text-decoration: underline;
}
}