mirror of
https://github.com/plankanban/planka.git
synced 2025-07-25 08:09:44 +02:00
Background gradients, migrate from CSS to SCSS, remove !important
This commit is contained in:
Maksim Eltyshev
parent
8534ed292c
commit
5bfff3865f
312 changed files with 4295 additions and 2989 deletions
|
|
@ -3,7 +3,7 @@ import ActionTypes from '../constants/ActionTypes';
|
|||
/* Events */
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export const appInitialized = () => ({
|
||||
type: ActionTypes.APP_INITIALIZED,
|
||||
export const coreInitialized = () => ({
|
||||
type: ActionTypes.CORE_INITIALIZED,
|
||||
payload: {},
|
||||
});
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
export * from './socket';
|
||||
export * from './login';
|
||||
export * from './app';
|
||||
export * from './core';
|
||||
export * from './modal';
|
||||
export * from './users';
|
||||
export * from './user';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { Input } from '../../lib/custom-ui';
|
|||
|
||||
import { useForm } from '../../hooks';
|
||||
|
||||
import styles from './AddProjectModal.module.css';
|
||||
import styles from './AddProjectModal.module.scss';
|
||||
|
||||
const AddProjectModal = React.memo(({ defaultData, isSubmitting, onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ import { Input, Popup } from '../../lib/custom-ui';
|
|||
import { useForm } from '../../hooks';
|
||||
import { isUsername } from '../../utils/validator';
|
||||
|
||||
import styles from './AddUserPopup.module.css';
|
||||
import styles from './AddUserPopup.module.scss';
|
||||
|
||||
const createMessage = (error) => {
|
||||
if (!error) {
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
12
client/src/components/AddUserPopup/AddUserPopup.module.scss
Normal file
12
client/src/components/AddUserPopup/AddUserPopup.module.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import ModalTypes from '../constants/ModalTypes';
|
||||
import FixedWrapperContainer from '../containers/FixedWrapperContainer';
|
||||
import StaticWrapperContainer from '../containers/StaticWrapperContainer';
|
||||
import UsersModalContainer from '../containers/UsersModalContainer';
|
||||
import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
|
||||
import AddProjectModalContainer from '../containers/AddProjectModalContainer';
|
||||
|
||||
const App = ({ currentModal }) => (
|
||||
<>
|
||||
<FixedWrapperContainer />
|
||||
<StaticWrapperContainer />
|
||||
{currentModal === ModalTypes.USERS && <UsersModalContainer />}
|
||||
{currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
|
||||
{currentModal === ModalTypes.ADD_PROJECT && <AddProjectModalContainer />}
|
||||
</>
|
||||
);
|
||||
|
||||
App.propTypes = {
|
||||
currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
|
||||
};
|
||||
|
||||
App.defaultProps = {
|
||||
currentModal: undefined,
|
||||
};
|
||||
|
||||
export default App;
|
||||
33
client/src/components/Background/Background.jsx
Normal file
33
client/src/components/Background/Background.jsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import upperFirst from 'lodash/upperFirst';
|
||||
import camelCase from 'lodash/camelCase';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import styles from './Background.module.scss';
|
||||
import globalStyles from '../../styles.module.scss';
|
||||
|
||||
const Background = ({ type, name, imageUrl }) => (
|
||||
<div
|
||||
className={classNames(
|
||||
styles.wrapper,
|
||||
type === 'gradient' && globalStyles[`background${upperFirst(camelCase(name))}`],
|
||||
)}
|
||||
style={{
|
||||
background: type === 'image' && `url("${imageUrl}") center / cover`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
Background.propTypes = {
|
||||
type: PropTypes.string.isRequired,
|
||||
name: PropTypes.string,
|
||||
imageUrl: PropTypes.string,
|
||||
};
|
||||
|
||||
Background.defaultProps = {
|
||||
name: undefined,
|
||||
imageUrl: undefined,
|
||||
};
|
||||
|
||||
export default Background;
|
||||
8
client/src/components/Background/Background.module.scss
Normal file
8
client/src/components/Background/Background.module.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
:global(#app) {
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
3
client/src/components/Background/index.js
Normal file
3
client/src/components/Background/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import Background from './Background';
|
||||
|
||||
export default Background;
|
||||
|
|
@ -6,7 +6,7 @@ import { useDidUpdate, useToggle } from '../../lib/hooks';
|
|||
|
||||
import { useClosableForm, useForm } from '../../hooks';
|
||||
|
||||
import styles from './AddList.module.css';
|
||||
import styles from './AddList.module.scss';
|
||||
|
||||
const DEFAULT_DATA = {
|
||||
name: '',
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
.controls {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.field {
|
||||
border: none;
|
||||
border-radius: 3px !important;
|
||||
box-shadow: 0 1px 0 #ccc !important;
|
||||
color: #333 !important;
|
||||
outline: none !important;
|
||||
overflow: hidden !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
border-color: #298fca;
|
||||
box-shadow: 0 0 2px #298fca;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
min-height: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background: #e2e4e6;
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
transition: opacity 40ms ease-in;
|
||||
width: 272px;
|
||||
}
|
||||
33
client/src/components/Board/AddList.module.scss
Normal file
33
client/src/components/Board/AddList.module.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.field {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 #ccc;
|
||||
color: #333;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
border-color: #298fca;
|
||||
box-shadow: 0 0 2px #298fca;
|
||||
}
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
min-height: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background: #e2e4e6;
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
transition: opacity 40ms ease-in;
|
||||
width: 272px;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ import AddList from './AddList';
|
|||
import Filter from './Filter';
|
||||
import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
|
||||
|
||||
import styles from './Board.module.css';
|
||||
import styles from './Board.module.scss';
|
||||
|
||||
const parseDndId = (dndId) => dndId.split(':')[1];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
.addListButton {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
fill: rgba(255, 255, 255, 0.72);
|
||||
font-weight: normal;
|
||||
height: 42px;
|
||||
padding: 11px;
|
||||
text-align: left;
|
||||
transition: background 85ms ease-in, opacity 40ms ease-in,
|
||||
border-color 85ms ease-in;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.addListButton:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.addListButton:hover {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.addListButtonIcon {
|
||||
height: 20px;
|
||||
padding: 0.64px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.addListButtonText {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 20px 0 4px;
|
||||
width: 272px;
|
||||
}
|
||||
|
||||
.lists {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0 20px;
|
||||
}
|
||||
54
client/src/components/Board/Board.module.scss
Normal file
54
client/src/components/Board/Board.module.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
:global(#app) {
|
||||
.addListButton {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
fill: rgba(255, 255, 255, 0.72);
|
||||
font-weight: normal;
|
||||
height: 42px;
|
||||
padding: 11px;
|
||||
text-align: left;
|
||||
transition: background 85ms ease-in, opacity 40ms ease-in,
|
||||
border-color 85ms ease-in;
|
||||
width: 100%;
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
}
|
||||
|
||||
.addListButtonIcon {
|
||||
height: 20px;
|
||||
padding: 0.64px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.addListButtonText {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 20px 0 4px;
|
||||
width: 272px;
|
||||
}
|
||||
|
||||
.lists {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import Label from '../Label';
|
|||
import ProjectMembershipsPopup from '../ProjectMembershipsPopup';
|
||||
import LabelsPopup from '../LabelsPopup';
|
||||
|
||||
import styles from './Filter.module.css';
|
||||
import styles from './Filter.module.scss';
|
||||
|
||||
const Filter = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
.filter {
|
||||
display: inline-block;
|
||||
line-height: 0 !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filterItem {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
margin-right: 4px;
|
||||
max-width: 190px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.filterLabel:hover {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.filterTitle {
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
line-height: 0 !important;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
53
client/src/components/Board/Filter.module.scss
Normal file
53
client/src/components/Board/Filter.module.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
:global(#app) {
|
||||
.filter {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filterItem {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
margin-right: 4px;
|
||||
max-width: 190px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 2px 8px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
}
|
||||
|
||||
.filterTitle {
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
line-height: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { Input, Popup } from '../../lib/custom-ui';
|
|||
|
||||
import { useForm } from '../../hooks';
|
||||
|
||||
import styles from './AddPopup.module.css';
|
||||
import styles from './AddPopup.module.scss';
|
||||
|
||||
const AddStep = React.memo(({ onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
5
client/src/components/Boards/AddPopup.module.scss
Normal file
5
client/src/components/Boards/AddPopup.module.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ import DroppableTypes from '../../constants/DroppableTypes';
|
|||
import AddPopup from './AddPopup';
|
||||
import EditPopup from './EditPopup';
|
||||
|
||||
import styles from './Boards.module.css';
|
||||
import styles from './Boards.module.scss';
|
||||
|
||||
const Boards = React.memo(
|
||||
({ items, currentId, isEditable, onCreate, onUpdate, onMove, onDelete }) => {
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
.addButton {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
margin-right: 0 !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.addButton:hover {
|
||||
background: rgba(34, 36, 38, 0.3) !important;
|
||||
}
|
||||
|
||||
.editButton {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: #fff !important;
|
||||
line-height: 32px !important;
|
||||
margin-right: 0 !important;
|
||||
opacity: 0;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.editButton:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff !important;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
padding: 10px 34px 6px 14px;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border-radius: 3px 3px 0 0;
|
||||
min-width: 100px;
|
||||
position: relative;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: rgba(0, 0, 0, 0.24) !important;
|
||||
}
|
||||
|
||||
.tab:hover .target {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.tabActive {
|
||||
background: rgba(0, 0, 0, 0.24) !important;
|
||||
}
|
||||
|
||||
.tabActive:hover {
|
||||
background: rgba(0, 0, 0, 0.32) !important;
|
||||
}
|
||||
|
||||
.tabWrapper {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.24);;
|
||||
display: flex;
|
||||
height: 38px;
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
82
client/src/components/Boards/Boards.module.scss
Normal file
82
client/src/components/Boards/Boards.module.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
:global(#app) {
|
||||
.addButton {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
margin-right: 0;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
background: rgba(34, 36, 38, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.editButton {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
line-height: 32px;
|
||||
margin-right: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 32px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
padding: 10px 34px 6px 14px;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border-radius: 3px 3px 0 0;
|
||||
min-width: 100px;
|
||||
position: relative;
|
||||
transition: all 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
|
||||
.target {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabActive {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
}
|
||||
|
||||
.tabWrapper {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.24);;
|
||||
display: flex;
|
||||
height: 38px;
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ import { Input, Popup } from '../../lib/custom-ui';
|
|||
import { useForm, useSteps } from '../../hooks';
|
||||
import DeleteStep from '../DeleteStep';
|
||||
|
||||
import styles from './EditPopup.module.css';
|
||||
import styles from './EditPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
DELETE: 'DELETE',
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
.deleteButton {
|
||||
bottom: 12px;
|
||||
box-shadow: 0 1px 0 #cbcccc;
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
19
client/src/components/Boards/EditPopup.module.scss
Normal file
19
client/src/components/Boards/EditPopup.module.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
:global(#app) {
|
||||
.deleteButton {
|
||||
bottom: 12px;
|
||||
box-shadow: 0 1px 0 #cbcccc;
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ import EditTimerStep from '../EditTimerStep';
|
|||
import MoveCardStep from '../MoveCardStep';
|
||||
import DeleteStep from '../DeleteStep';
|
||||
|
||||
import styles from './ActionsPopup.module.css';
|
||||
import styles from './ActionsPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
USERS: 'USERS',
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.menu {
|
||||
margin: -7px -12px -5px !important;
|
||||
width: calc(100% + 24px) !important;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0 !important;
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
11
client/src/components/Card/ActionsPopup.module.scss
Normal file
11
client/src/components/Card/ActionsPopup.module.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
:global(#app) {
|
||||
.menu {
|
||||
margin: -7px -12px -5px;
|
||||
width: calc(100% + 24px);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ import Label from '../Label';
|
|||
import DueDate from '../DueDate';
|
||||
import Timer from '../Timer';
|
||||
|
||||
import styles from './Card.module.css';
|
||||
import styles from './Card.module.scss';
|
||||
|
||||
const Card = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
.actionsButton {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 3px !important;
|
||||
box-sizing: content-box;
|
||||
color: #798d99 !important;
|
||||
display: inline-block !important;
|
||||
margin: 0 !important;
|
||||
min-height: auto !important;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
padding: 4px !important;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
transition: background 85ms ease !important;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.actionsButton:hover {
|
||||
background: #ebeef0 !important;
|
||||
color: #516b7a !important;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin: 0 0 6px 0;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.attachmentLeft {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.attachmentRight {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: inline-block;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.attachmentsRight {
|
||||
float: right;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 #ccc;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background: #f5f6f7;
|
||||
border-bottom-color: rgba(9, 30, 66, 0.25);
|
||||
}
|
||||
|
||||
.card:hover .target {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
cursor: grab;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.cover {
|
||||
border-radius: 3px 3px 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 6px 8px 0;
|
||||
}
|
||||
|
||||
.labels {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #17394d;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding-bottom: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: #eb5a46;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 0px 6px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
122
client/src/components/Card/Card.module.scss
Normal file
122
client/src/components/Card/Card.module.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
:global(#app) {
|
||||
.actionsButton {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
box-sizing: content-box;
|
||||
color: #798d99;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
transition: background 85ms ease;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
background: #ebeef0;
|
||||
color: #516b7a;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin: 0 0 6px 0;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.attachmentLeft {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.attachmentRight {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: inline-block;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.attachmentsRight {
|
||||
float: right;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 #ccc;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #f5f6f7;
|
||||
border-bottom-color: rgba(9, 30, 66, 0.25);
|
||||
|
||||
.target {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
cursor: grab;
|
||||
display: block;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
border-radius: 3px 3px 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 6px 8px 0;
|
||||
}
|
||||
|
||||
.labels {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #17394d;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding-bottom: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: #eb5a46;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 0px 6px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useClosableForm, useField } from '../../hooks';
|
||||
|
||||
import styles from './EditName.module.css';
|
||||
import styles from './EditName.module.scss';
|
||||
|
||||
const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
.field {
|
||||
border: none !important;
|
||||
margin-bottom: 4px !important;
|
||||
outline: none !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
resize: none !important;
|
||||
width: 100% !important;
|
||||
word-wrap: break-word !important;
|
||||
}
|
||||
|
||||
.fieldWrapper {
|
||||
background: #fff !important;
|
||||
border-radius: 3px !important;
|
||||
box-shadow: 0 1px 0 #ccc !important;
|
||||
margin-bottom: 8px !important;
|
||||
min-height: 20px !important;
|
||||
padding: 6px 8px 2px !important;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
margin-bottom: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
26
client/src/components/Card/EditName.module.scss
Normal file
26
client/src/components/Card/EditName.module.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
border: none;
|
||||
margin-bottom: 4px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.fieldWrapper {
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 #ccc;
|
||||
margin-bottom: 8px;
|
||||
min-height: 20px;
|
||||
padding: 6px 8px 2px;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
margin-bottom: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import classNames from 'classnames';
|
|||
import { Progress } from 'semantic-ui-react';
|
||||
import { useToggle } from '../../lib/hooks';
|
||||
|
||||
import styles from './Tasks.module.css';
|
||||
import styles from './Tasks.module.scss';
|
||||
|
||||
const Tasks = React.memo(({ items }) => {
|
||||
const [isOpened, toggleOpened] = useToggle();
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
.button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
margin: 0 -8px;
|
||||
outline: none;
|
||||
padding: 0px 8px 8px;
|
||||
width: calc(100% + 16px);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.count:after {
|
||||
content: "";
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.count:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.countOpened:after {
|
||||
background: url("data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=")
|
||||
no-repeat center right;
|
||||
margin-left: 2px;
|
||||
padding: 6px 6px 0px;
|
||||
}
|
||||
|
||||
.countClosed:after {
|
||||
background: url("data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIRnC2nKLnT4or00Puy3rx7VQAAOw==")
|
||||
no-repeat center right;
|
||||
margin-left: 2px;
|
||||
padding: 0 6px 6px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.progressWrapper {
|
||||
display: inline-block;
|
||||
padding: 3px 0;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.task {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.task:before {
|
||||
content: "–";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.taskCompleted {
|
||||
color: #aaa;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.tasks {
|
||||
color: #333;
|
||||
cursor: grab;
|
||||
list-style: none;
|
||||
margin: -2px 0 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
85
client/src/components/Card/Tasks.module.scss
Normal file
85
client/src/components/Card/Tasks.module.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
:global(#app) {
|
||||
.button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
margin: 0 -8px;
|
||||
outline: none;
|
||||
padding: 0px 8px 8px;
|
||||
width: calc(100% + 16px);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
width: 50px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.countOpened:after {
|
||||
background: url("data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=")
|
||||
no-repeat center right;
|
||||
margin-left: 2px;
|
||||
padding: 6px 6px 0px;
|
||||
}
|
||||
|
||||
.countClosed:after {
|
||||
background: url("data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIRnC2nKLnT4or00Puy3rx7VQAAOw==")
|
||||
no-repeat center right;
|
||||
margin-left: 2px;
|
||||
padding: 0 6px 6px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progressWrapper {
|
||||
display: inline-block;
|
||||
padding: 3px 0;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.task {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 14px;
|
||||
word-break: break-all;
|
||||
|
||||
&:before {
|
||||
content: "–";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.taskCompleted {
|
||||
color: #aaa;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.tasks {
|
||||
color: #333;
|
||||
cursor: grab;
|
||||
list-style: none;
|
||||
margin: -2px 0 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { ActionTypes } from '../../../constants/Enums';
|
|||
import AddComment from './AddComment';
|
||||
import Item from './Item';
|
||||
|
||||
import styles from './Actions.module.css';
|
||||
import styles from './Actions.module.scss';
|
||||
|
||||
const Actions = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px !important;
|
||||
height: 32px !important;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0 !important;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px !important;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-left: -40px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
40
client/src/components/CardModal/Actions/Actions.module.scss
Normal file
40
client/src/components/CardModal/Actions/Actions.module.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
:global(#app) {
|
||||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px;
|
||||
height: 32px;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-left: -40px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useForm } from '../../../hooks';
|
||||
|
||||
import styles from './AddComment.module.css';
|
||||
import styles from './AddComment.module.scss';
|
||||
|
||||
const DEFAULT_DATA = {
|
||||
text: '',
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 0 !important;
|
||||
box-sizing: border-box;
|
||||
color: #333 !important;
|
||||
display: block;
|
||||
line-height: 1.5 !important;
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 6px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useClosableForm, useForm } from '../../../hooks';
|
||||
|
||||
import styles from './EditComment.module.css';
|
||||
import styles from './EditComment.module.scss';
|
||||
|
||||
const EditComment = React.forwardRef(({ children, defaultData, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13) !important;
|
||||
border-radius: 3px !important;
|
||||
box-sizing: border-box;
|
||||
color: #333 !important;
|
||||
display: block;
|
||||
line-height: 1.4 !important;
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 4px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import { ActionTypes } from '../../../constants/Enums';
|
|||
import ItemComment from './ItemComment';
|
||||
import User from '../../User';
|
||||
|
||||
import styles from './Item.module.css';
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(({ type, data, createdAt, user }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
33
client/src/components/CardModal/Actions/Item.module.scss
Normal file
33
client/src/components/CardModal/Actions/Item.module.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
:global(#app) {
|
||||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ import EditComment from './EditComment';
|
|||
import User from '../../User';
|
||||
import DeletePopup from '../../DeletePopup';
|
||||
|
||||
import styles from './ItemComment.module.css';
|
||||
import styles from './ItemComment.module.scss';
|
||||
|
||||
const ItemComment = React.memo(
|
||||
({ data, createdAt, isPersisted, user, isEditable, onUpdate, onDelete }) => {
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: #fff;
|
||||
border-radius: 0px 8px 8px;
|
||||
box-shadow: 0 1px 2px -1px rgba(9, 30, 66, 0.25),
|
||||
0 0 0 1px rgba(9, 30, 66, 0.08);
|
||||
box-sizing: border-box;
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
margin: 1px 2px 4px 1px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
:global(#app) {
|
||||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: #fff;
|
||||
border-radius: 0px 8px 8px;
|
||||
box-shadow: 0 1px 2px -1px rgba(9, 30, 66, 0.25),
|
||||
0 0 0 1px rgba(9, 30, 66, 0.08);
|
||||
box-sizing: border-box;
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
margin: 1px 2px 4px 1px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { Menu } from 'semantic-ui-react';
|
|||
import { withPopup } from '../../lib/popup';
|
||||
import { FilePicker, Popup } from '../../lib/custom-ui';
|
||||
|
||||
import styles from './AddAttachmentPopup.module.css';
|
||||
import styles from './AddAttachmentPopup.module.scss';
|
||||
|
||||
const AddAttachmentStep = React.memo(({ onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.divider {
|
||||
background: #eee;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: -7px -12px -5px !important;
|
||||
width: calc(100% + 24px) !important;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0 !important;
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
||||
.tip {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
:global(#app) {
|
||||
.divider {
|
||||
background: #eee;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: -7px -12px -5px;
|
||||
width: calc(100% + 24px);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { closePopup } from '../../../lib/popup';
|
|||
import { useModal } from '../../../hooks';
|
||||
import AddTextFileModal from './AddTextFileModal';
|
||||
|
||||
import styles from './AddAttachmentZone.module.css';
|
||||
import styles from './AddAttachmentZone.module.scss';
|
||||
|
||||
const AddAttachmentZone = React.memo(({ children, onCreate }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
.dropzone {
|
||||
background: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
opacity: 0.7;
|
||||
padding: 200px 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
:global(#app) {
|
||||
.dropzone {
|
||||
background: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
opacity: 0.7;
|
||||
padding: 200px 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Input } from '../../../lib/custom-ui';
|
|||
|
||||
import { useForm } from '../../../hooks';
|
||||
|
||||
import styles from './AddTextFileModal.module.css';
|
||||
import styles from './AddTextFileModal.module.scss';
|
||||
|
||||
const AddTextFileModal = React.memo(({ content, onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { useToggle } from '../../../lib/hooks';
|
|||
|
||||
import Item from './Item';
|
||||
|
||||
import styles from './Attachments.module.css';
|
||||
import styles from './Attachments.module.scss';
|
||||
|
||||
const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
.toggleButton {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: #6b808c !important;
|
||||
font-weight: normal !important;
|
||||
margin-top: 8px !important;
|
||||
padding: 6px 11px !important;
|
||||
text-align: left !important;
|
||||
text-decoration: underline !important;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.toggleButton:hover {
|
||||
background: rgba(9, 30, 66, 0.08) !important;
|
||||
color: #092d42 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
:global(#app) {
|
||||
.toggleButton {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #6b808c;
|
||||
font-weight: normal;
|
||||
margin-top: 8px;
|
||||
padding: 6px 11px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
|
|||
import { useForm, useSteps } from '../../../hooks';
|
||||
import DeleteStep from '../../DeleteStep';
|
||||
|
||||
import styles from './EditPopup.module.css';
|
||||
import styles from './EditPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
DELETE: 'DELETE',
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
.deleteButton {
|
||||
bottom: 12px;
|
||||
box-shadow: 0 1px 0 #cbcccc;
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
:global(#app) {
|
||||
.deleteButton {
|
||||
bottom: 12px;
|
||||
box-shadow: 0 1px 0 #cbcccc;
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Icon, Label, Loader } from 'semantic-ui-react';
|
|||
|
||||
import EditPopup from './EditPopup';
|
||||
|
||||
import styles from './Item.module.css';
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,121 +0,0 @@
|
|||
.button {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
line-height: 28px !important;
|
||||
margin: 0 !important;
|
||||
min-height: auto !important;
|
||||
opacity: 0;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: rgba(9, 30, 66, 0.08) !important;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.details {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 32px 6px 128px;
|
||||
margin: 0;
|
||||
min-height: 80px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.extension {
|
||||
color: #5e6c84;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 80px;
|
||||
overflow: hidden;
|
||||
padding: 0 20px 0 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #17394d;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.option {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
color: #172b4d;
|
||||
}
|
||||
|
||||
.optionIcon {
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
|
||||
.optionText {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
border-radius: 3px;
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border-radius: 3px;
|
||||
height: 80px;
|
||||
left: 0;
|
||||
margin-top: -40px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
top: 50%;
|
||||
width: 112px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.thumbnailLabel {
|
||||
border-color: rgba(29, 46, 63, 0.8) !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
min-height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper:hover .details {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
|
||||
.wrapper:hover .target {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wrapperSubmitting {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
125
client/src/components/CardModal/Attachments/Item.module.scss
Normal file
125
client/src/components/CardModal/Attachments/Item.module.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
:global(#app) {
|
||||
.button {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.details {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 32px 6px 128px;
|
||||
margin: 0;
|
||||
min-height: 80px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.extension {
|
||||
color: #5e6c84;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 80px;
|
||||
overflow: hidden;
|
||||
padding: 0 20px 0 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #17394d;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.option {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: #172b4d;
|
||||
}
|
||||
}
|
||||
|
||||
.optionIcon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.optionText {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
border-radius: 3px;
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border-radius: 3px;
|
||||
height: 80px;
|
||||
left: 0;
|
||||
margin-top: -40px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
top: 50%;
|
||||
width: 112px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.thumbnailLabel {
|
||||
border-color: rgba(29, 46, 63, 0.8);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
min-height: 80px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.details {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
|
||||
.target {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapperSubmitting {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ import EditTimerPopup from '../EditTimerPopup';
|
|||
import MoveCardPopup from '../MoveCardPopup';
|
||||
import DeletePopup from '../DeletePopup';
|
||||
|
||||
import styles from './CardModal.module.css';
|
||||
import styles from './CardModal.module.scss';
|
||||
|
||||
const CardModal = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,217 +0,0 @@
|
|||
.actionButton {
|
||||
background: #ebeef0 !important;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.13) !important;
|
||||
color: #444 !important;
|
||||
margin-top: 8px !important;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 6px 18px !important;
|
||||
text-align: left !important;
|
||||
text-overflow: ellipsis;
|
||||
transition: background 85ms ease !important;
|
||||
}
|
||||
|
||||
.actionButton:hover {
|
||||
background: #dfe3e6 !important;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.25) !important;
|
||||
color: #4c4c4c !important;
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
color: #17394d !important;
|
||||
display: inline !important;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.actionsTitle {
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 16px;
|
||||
text-transform: uppercase;
|
||||
line-height: 20px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.addAttachment {
|
||||
margin: 0 -4.3px !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: inline-block;
|
||||
margin: 0 8px 8px 0;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contentPadding {
|
||||
padding: 8px 8px 0 16px !important;
|
||||
}
|
||||
|
||||
.dueDate {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
outline: none;
|
||||
padding: 6px 14px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dueDate:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #17394d;
|
||||
}
|
||||
|
||||
.descriptionButton {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.descriptionButton:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
|
||||
.descriptionButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.descriptionText img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #f5f6f7;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.headerPadding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
margin: 4px 0;
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
margin: 12px 48px 12px 56px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.labels {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
min-width: 40px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modalPadding {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px !important;
|
||||
height: 32px !important;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0 !important;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px !important;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #6b808c;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 20px;
|
||||
margin: 0 8px 4px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebarPadding {
|
||||
padding: 8px 16px 0 8px !important;
|
||||
}
|
||||
|
||||
/* .wrapper {
|
||||
min-width: 768px;
|
||||
} */
|
||||
219
client/src/components/CardModal/CardModal.module.scss
Normal file
219
client/src/components/CardModal/CardModal.module.scss
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
:global(#app) {
|
||||
.actionButton {
|
||||
background: #ebeef0;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.13);
|
||||
color: #444;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 6px 18px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
transition: background 85ms ease;
|
||||
|
||||
&:hover {
|
||||
background: #dfe3e6;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.25);
|
||||
color: #4c4c4c;
|
||||
}
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
color: #17394d;
|
||||
display: inline;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.actionsTitle {
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 16px;
|
||||
text-transform: uppercase;
|
||||
line-height: 20px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.addAttachment {
|
||||
margin: 0 -4.3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: inline-block;
|
||||
margin: 0 8px 8px 0;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contentPadding {
|
||||
padding: 8px 8px 0 16px;
|
||||
}
|
||||
|
||||
.dueDate {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
outline: none;
|
||||
padding: 6px 14px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #17394d;
|
||||
}
|
||||
}
|
||||
|
||||
.descriptionButton {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
|
||||
.descriptionButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #f5f6f7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headerPadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
margin: 4px 0;
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
margin: 12px 48px 12px 56px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.labels {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
min-width: 40px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modalPadding {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px;
|
||||
height: 32px;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebarPadding {
|
||||
padding: 8px 16px 0 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #6b808c;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 20px;
|
||||
margin: 0 8px 4px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* .wrapper {
|
||||
min-width: 768px;
|
||||
} */
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useClosableForm, useField } from '../../hooks';
|
||||
|
||||
import styles from './EditDescription.module.css';
|
||||
import styles from './EditDescription.module.scss';
|
||||
|
||||
const EditDescription = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
.controls {
|
||||
clear: both !important;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13) !important;
|
||||
border-radius: 3px !important;
|
||||
color: #17394d !important;
|
||||
display: block !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.5 !important;
|
||||
margin-bottom: 4px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
24
client/src/components/CardModal/EditDescription.module.scss
Normal file
24
client/src/components/CardModal/EditDescription.module.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13);
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { useDidUpdate, usePrevious } from '../../lib/hooks';
|
|||
|
||||
import { useField } from '../../hooks';
|
||||
|
||||
import styles from './NameField.module.css';
|
||||
import styles from './NameField.module.scss';
|
||||
|
||||
const NameField = React.memo(({ defaultValue, onUpdate }) => {
|
||||
const prevDefaultValue = usePrevious(defaultValue);
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
.field {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
color: #17394d;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
margin: -5px;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
background: #fff;
|
||||
border-color: #5ba4cf;
|
||||
box-shadow: 0 0 2px 0 #5ba4cf;
|
||||
outline: 0;
|
||||
}
|
||||
24
client/src/components/CardModal/NameField.module.scss
Normal file
24
client/src/components/CardModal/NameField.module.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
color: #17394d;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
margin: -5px;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
background: #fff;
|
||||
border-color: #5ba4cf;
|
||||
box-shadow: 0 0 2px 0 #5ba4cf;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import { Popup } from '../../../lib/custom-ui';
|
|||
import { useSteps } from '../../../hooks';
|
||||
import DeleteStep from '../../DeleteStep';
|
||||
|
||||
import styles from './ActionsPopup.module.css';
|
||||
import styles from './ActionsPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
DELETE: 'DELETE',
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.menu {
|
||||
margin: -7px -12px -5px !important;
|
||||
width: calc(100% + 24px) !important;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0 !important;
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
:global(#app) {
|
||||
.menu {
|
||||
margin: -7px -12px -5px;
|
||||
width: calc(100% + 24px);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { useDidUpdate, useToggle } from '../../../lib/hooks';
|
|||
|
||||
import { useClosableForm, useForm } from '../../../hooks';
|
||||
|
||||
import styles from './Add.module.css';
|
||||
import styles from './Add.module.scss';
|
||||
|
||||
const DEFAULT_DATA = {
|
||||
name: '',
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.controls {
|
||||
clear: both !important;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.08) !important;
|
||||
border-radius: 3px !important;
|
||||
color: #17394d !important;
|
||||
display: block !important;
|
||||
line-height: 1.5 !important;
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 4px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-top: 6px !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
25
client/src/components/CardModal/Tasks/Add.module.scss
Normal file
25
client/src/components/CardModal/Tasks/Add.module.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.08);
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-top: 6px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useClosableForm, useField } from '../../../hooks';
|
||||
|
||||
import styles from './EditName.module.css';
|
||||
import styles from './EditName.module.scss';
|
||||
|
||||
const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13) !important;
|
||||
border-radius: 3px !important;
|
||||
box-sizing: border-box !important;
|
||||
color: #17394d !important;
|
||||
display: block !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.5 !important;
|
||||
overflow: hidden !important;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 9px 32px 16px 40px;
|
||||
}
|
||||
28
client/src/components/CardModal/Tasks/EditName.module.scss
Normal file
28
client/src/components/CardModal/Tasks/EditName.module.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #17394d;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 9px 32px 16px 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Checkbox, Icon } from 'semantic-ui-react';
|
|||
import EditName from './EditName';
|
||||
import ActionsPopup from './ActionsPopup';
|
||||
|
||||
import styles from './Item.module.css';
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete }) => {
|
||||
const editName = useRef(null);
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
.button {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
line-height: 28px !important;
|
||||
margin: 0 !important;
|
||||
min-height: auto !important;
|
||||
opacity: 0;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: rgba(9, 30, 66, 0.08) !important;
|
||||
}
|
||||
|
||||
.checkboxWrapper {
|
||||
display: inline-block;
|
||||
padding: 10px 15px 0px 8px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
vertical-align: top;
|
||||
z-index: 2000;
|
||||
line-height: 1;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.content:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
|
||||
.content:hover .target {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.task {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 8px 0;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.taskCompleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
min-height: 32px;
|
||||
padding: 0 32px 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-radius: 3px;
|
||||
margin-left: -40px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
transition: all 0.14s ease-in;
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
75
client/src/components/CardModal/Tasks/Item.module.scss
Normal file
75
client/src/components/CardModal/Tasks/Item.module.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
:global(#app) {
|
||||
.button {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.checkboxWrapper {
|
||||
display: inline-block;
|
||||
padding: 10px 15px 0px 8px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
vertical-align: top;
|
||||
z-index: 2000;
|
||||
line-height: 1;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.content:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
|
||||
.target {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.task {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 8px 0;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.taskCompleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
min-height: 32px;
|
||||
padding: 0 32px 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-radius: 3px;
|
||||
margin-left: -40px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
transition: all 0.14s ease-in;
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Progress } from 'semantic-ui-react';
|
|||
import Item from './Item';
|
||||
import Add from './Add';
|
||||
|
||||
import styles from './Tasks.module.css';
|
||||
import styles from './Tasks.module.scss';
|
||||
|
||||
const Tasks = React.memo(({ items, onCreate, onUpdate, onDelete }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
.progress {
|
||||
margin: 0 0 16px !important;
|
||||
}
|
||||
|
||||
.taskButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.taskButton:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
color: #092d42;
|
||||
}
|
||||
|
||||
.taskButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
32
client/src/components/CardModal/Tasks/Tasks.module.scss
Normal file
32
client/src/components/CardModal/Tasks/Tasks.module.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
:global(#app) {
|
||||
.progress {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.taskButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
|
||||
.taskButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
39
client/src/components/Core.jsx
Executable file
39
client/src/components/Core.jsx
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import ModalTypes from '../constants/ModalTypes';
|
||||
import FixedContainer from '../containers/FixedContainer';
|
||||
import StaticContainer from '../containers/StaticContainer';
|
||||
import UsersModalContainer from '../containers/UsersModalContainer';
|
||||
import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
|
||||
import AddProjectModalContainer from '../containers/AddProjectModalContainer';
|
||||
import Background from './Background';
|
||||
|
||||
const Core = ({ currentModal, currentProject }) => (
|
||||
<>
|
||||
{currentProject && currentProject.background && (
|
||||
<Background
|
||||
type={currentProject.background.type}
|
||||
name={currentProject.background.name}
|
||||
imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
|
||||
/>
|
||||
)}
|
||||
<FixedContainer />
|
||||
<StaticContainer />
|
||||
{currentModal === ModalTypes.USERS && <UsersModalContainer />}
|
||||
{currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
|
||||
{currentModal === ModalTypes.ADD_PROJECT && <AddProjectModalContainer />}
|
||||
</>
|
||||
);
|
||||
|
||||
Core.propTypes = {
|
||||
currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
|
||||
currentProject: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||
};
|
||||
|
||||
Core.defaultProps = {
|
||||
currentModal: undefined,
|
||||
currentProject: undefined,
|
||||
};
|
||||
|
||||
export default Core;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue