diff --git a/app/components/Cards/CardItem.jsx b/app/components/Cards/CardItem.jsx index 27026057..6566a489 100644 --- a/app/components/Cards/CardItem.jsx +++ b/app/components/Cards/CardItem.jsx @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Labels from 'UI/Labels'; import Editor from 'Components/MarkdownEditor'; +import FocusIcon from 'UI/FocusIcon'; import BoardsIcon from 'UI/BoardsIcon'; import BoardPicker from 'UI/BoardPicker'; import Button from 'UI/Button'; @@ -141,7 +142,12 @@ class MdynaCard extends PureComponent { cardActions.editCard(card, isFocused); } }} - className={classnames(className, COLOR_LABELS[color], 'card-item', isFocused && 'focused')} + className={classnames( + className, + COLOR_LABELS[color], + 'card-item', + isFocused && 'focused', + )} style={{ backgroundColor: color, transition: 'all 0.5s ease-in', @@ -210,17 +216,15 @@ class MdynaCard extends PureComponent { color={color} /> {cardBoardName !== 'INBOX' && activeBoardId !== card.board && ( - changeActiveBoard(card.board)} - > - - - - {cardBoardName} + changeActiveBoard(card.board)} + > + + + {cardBoardName} - - + )} {this.renderCardDate()} @@ -266,6 +270,14 @@ class MdynaCard extends PureComponent { backgroundColor: 'transparent', }} /> + {card.seeMore && !isFocused && ( +
+ +
+ )} ); diff --git a/app/components/Cards/CardList.scss b/app/components/Cards/CardList.scss index efa906f9..7390e430 100644 --- a/app/components/Cards/CardList.scss +++ b/app/components/Cards/CardList.scss @@ -29,6 +29,20 @@ margin: 5px; } } + .see-more-btn { + background-color: #333; + padding: 5px; + border-radius: 10px; + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; + width: fit-content; + margin: 15px auto; + button svg { + margin: 0 15px; + } + } .no-notes-box { margin-top: 20%; } diff --git a/app/components/GistSync.jsx b/app/components/GistSync.jsx index f4313f3b..ab713af2 100644 --- a/app/components/GistSync.jsx +++ b/app/components/GistSync.jsx @@ -29,20 +29,18 @@ class GistSync extends PureComponent { githubUserName, githubPassword, gistId, - skipLogin, lastSyncDate, } = this.props; + const hasSyncedRecently = syncTimer => Boolean( lastSyncDate - && new Date().getMinutes() - new Date(lastSyncDate).getMinutes() - <= syncTimer, + && new Date().getMinutes() - new Date(lastSyncDate).getMinutes() + <= syncTimer, ); if (githubUserName && githubPassword) { this.authToGithub(githubUserName, githubPassword, gistId); - if (!skipLogin) { - if (!hasSyncedRecently(0.5)) { - this.updateGist(gistId); - } + if (!hasSyncedRecently(5)) { + this.updateGist(gistId); } } } @@ -123,7 +121,7 @@ class GistSync extends PureComponent { )} ) : ( - + { - toast.success('Switched to White theme'); + toast.success('Switched to Light theme'); changeTheme('white'); }} > @@ -174,7 +173,7 @@ class Settings extends PureComponent { ); clickableLabels.push(labelElement); diff --git a/app/components/UI/LabelInput.jsx b/app/components/UI/LabelInput.jsx index 7d3f249e..acac8359 100644 --- a/app/components/UI/LabelInput.jsx +++ b/app/components/UI/LabelInput.jsx @@ -93,7 +93,6 @@ const LabelInput = ({ onChange={updateCurrentTag} color="inherit" value={currentTag} - autoFocus onSelect={(event) => { event.stopPropagation(); onAddTag(event.suggestion); diff --git a/app/components/UI/Labels.jsx b/app/components/UI/Labels.jsx index a738fca1..c255a9cc 100644 --- a/app/components/UI/Labels.jsx +++ b/app/components/UI/Labels.jsx @@ -1,13 +1,14 @@ import React, { Component } from 'react'; import tc from 'tinycolor2'; import PropTypes from 'prop-types'; +import { Text } from 'grommet'; export const Label = ({ - onClick, color, label, transparent, + onClick, color, label, transparent, active, }) => ( - {label} - + ); Label.defaultProps = { - color: '#000', + color: '', transparent: false, onClick: null, + active: false, label: '', }; Label.propTypes = { onClick: PropTypes.func, transparent: PropTypes.bool, + active: PropTypes.bool, label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), color: PropTypes.string, }; class Labels extends Component { renderLabelText(label) { const { - color, transparent, labelFuncs, labelFilters, + color, transparent, labelFuncs, labelFilters, active, } = this.props; if (labelFuncs && labelFilters) { const { addLabelFilter, removeLabelFilter } = labelFuncs; @@ -48,10 +51,9 @@ class Labels extends Component { const labelFunc = labelFilterActive ? removeLabelFilter : addLabelFilter; /* eslint-disable */ return ( - labelFunc(label.title)} > {label.title || label} - + ); /* eslint-enable */ } return ( - {label.title || label} - + ); } @@ -107,6 +109,7 @@ export default Labels; Labels.propTypes = { labels: PropTypes.array, + active: PropTypes.bool, transparent: PropTypes.bool, color: PropTypes.string, labelFuncs: PropTypes.object, @@ -115,9 +118,10 @@ Labels.propTypes = { }; Labels.defaultProps = { - color: '#000', + color: '', labelFilters: [], labelFuncs: null, + active: false, label: null, transparent: false, labels: [], diff --git a/app/containers/GistSync.js b/app/containers/GistSync.js index 30a9c594..69074cdd 100644 --- a/app/containers/GistSync.js +++ b/app/containers/GistSync.js @@ -43,13 +43,7 @@ const syncCardsProp = async (dispatch) => { }; function mapDispatchToProps(dispatch, ownProps) { - const { githubAuthOn, lastSyncDate } = ownProps; - // TODO Move this to utils #DRY - const hasSyncedRecently = syncTimer => Boolean( - lastSyncDate - && new Date().getMinutes() - new Date(lastSyncDate).getMinutes() - <= syncTimer, - ); + const { githubAuthOn } = ownProps; return { loginToGh: async (username, pw, gistId) => { if (!githubAuthOn) { @@ -75,11 +69,9 @@ function mapDispatchToProps(dispatch, ownProps) { }, syncCards: () => syncCardsProp(dispatch), updateGist: (id) => { - if (!hasSyncedRecently(1)) { - Gists.updateGistId(id); - syncCardsProp(dispatch); - dispatch(updateGist(id)); - } + Gists.updateGistId(id); + syncCardsProp(dispatch); + dispatch(updateGist(id)); }, }; } diff --git a/app/containers/Settings.js b/app/containers/Settings.js index 997ec4e8..5dae906f 100644 --- a/app/containers/Settings.js +++ b/app/containers/Settings.js @@ -57,7 +57,6 @@ function mapStateToProps(state) { codeTheme: state.settings.codeTheme, settingsModal: state.settings.settingsModal, theme: state.style.theme, - lastSyncDate: state.settings.lastSyncDate, githubAuthOn: state.settings.githubAuthOn || false, boards: state.boards.boardList, boardNames: state.boards.boardNames, diff --git a/app/containers/Sidebar.js b/app/containers/Sidebar.js index 96dd7029..135a2482 100644 --- a/app/containers/Sidebar.js +++ b/app/containers/Sidebar.js @@ -72,7 +72,6 @@ function mapStateToProps(state) { labelFilters: state.filters.labelFilters, labels: boardLabelsSelector(state), order: state.filters.order || DESCENDING_ORDER, - lastSyncDate: state.settings.lastSyncDate, githubAuthOn: state.settings.githubAuthOn || false, sidebarExpanded: state.style.sidebarExpanded, sorting: state.filters.sorting || SORTING_BY_DATE, diff --git a/app/store/reducers/cards.js b/app/store/reducers/cards.js index 92acc140..dc4babeb 100644 --- a/app/store/reducers/cards.js +++ b/app/store/reducers/cards.js @@ -101,7 +101,7 @@ export default function cards(state = [], action) { ...action.card, id: cardId, isEditing: false, - text: action.card.text, + text: action.card.fullText || action.card.text, title: action.card.title, labels: action.card.labels, color: action.card.color, @@ -163,10 +163,11 @@ export default function cards(state = [], action) { return { ...action.card, id: cardId, + text: card.fullText || card.text, isEditing: true, editingLabels: card.labels, editingColor: card.color, - editingText: card.text, + editingText: card.fullText || card.text, editingTitle: card.title, }; } diff --git a/app/store/selectors.js b/app/store/selectors.js index d328bca2..b7a4b612 100644 --- a/app/store/selectors.js +++ b/app/store/selectors.js @@ -57,15 +57,24 @@ const filtersSelector = state => state.filters; const cardListSelector = createSelector( cardsSelector, filtersSelector, - (cards, filters) => (filters.isFocused - ? [filters.focusedCard] - : sortCards( - cards, - filters.sorting || SORTING_BY_DATE, - filters.order || DESCENDING_ORDER, - filters.archivedFilterOn || false, - filters.activeBoard || false, - )), + (cards, filters) => { + const cardList = filters.isFocused + ? [filters.focusedCard] + : sortCards( + cards, + filters.sorting || SORTING_BY_DATE, + filters.order || DESCENDING_ORDER, + filters.archivedFilterOn || false, + filters.activeBoard || false, + ); + const hideText = c => !filters.isFocused && !c.isEditing && (c.text.length > 500); + return cardList.map(c => ({ + ...c, + text: hideText(c) ? c.text.slice(0, 500) : c.text, + fullText: hideText(c) ? c.text : '', + seeMore: hideText(c), + })); + }, ); const boardLabelsSelector = createSelector( @@ -80,7 +89,9 @@ const boardLabelsSelector = createSelector( labels.push(...card.labels); } } - return [...new Set(labels)]; + return [...new Set(labels.map(l => l.title))].map(uniqL => ({ + title: uniqL, + })); }, ); @@ -109,7 +120,10 @@ const titlesSelector = createSelector( ); const labelsSelector = state => state.labels; -const globalLabelsSelector = createSelector(labelsSelector, labels => labels.map(l => l.title)); +const globalLabelsSelector = createSelector( + labelsSelector, + labels => labels.map(l => l.title), +); const SELECTORS = { cardListSelector, diff --git a/app/themes/flat-white.palette.json b/app/themes/flat-white.palette.json index 8036aca7..5eef3224 100644 --- a/app/themes/flat-white.palette.json +++ b/app/themes/flat-white.palette.json @@ -1,9 +1,9 @@ { - "brand": "#111", + "brand": "#f5f6fa", "background": "#fafafa", - "text": "#000", - "accent": ["#aaa", "#ff0000", "#000"], - "neutral": ["#333333", "#dddddd"], - "dark": ["#f1f1f1", "#ddd", "#fafafa"], - "light": ["#dadada", "#bdbdbd"] + "text": "#b2bec3", + "accent": ["#4b4b4b", "#ff4d4d", "#d2dae2"], + "neutral": ["#3d3d3d", "#dddddd"], + "dark": ["#2d3436", "#718093", "#dfe6e9"], + "light": ["#dadada", "#fafafa"] } diff --git a/app/utils/gistsService.js b/app/utils/gistsService.js index 543b40d7..83716e54 100644 --- a/app/utils/gistsService.js +++ b/app/utils/gistsService.js @@ -54,7 +54,7 @@ class GistsService { if (repeatedCard) { const repeatedCardIndex = this.uniqCards.indexOf(repeatedCard); if ( - new Date(repeatedCard.lastEditDate) < new Date(cards.lastEditDate) + new Date(repeatedCard.lastEditDate) < new Date(card.lastEditDate) ) { this.uniqCards[repeatedCardIndex] = card; }