Merge pull request #89 from mdyna/dev

- Fix Github Gists not overwriting older cards - Fix duplicates showing in label filters - Clip cards and add a 'See More' button which expands cards - Removed autofocus from label input when editing a card - Added a different color to active label filters - FIxed theme names and updated flat white theme
mdyna · Feb 25, 2020 · ca8f394 · ca8f394
2 parents ea074a9 + e687b17
commit ca8f394
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 85 deletions.
diff --git 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 && (
-            <Box
-              className="board-indicator"
-              onClick={() => changeActiveBoard(card.board)}
-            >
-              <Text color={color} className="board-indicator-text">
-                <BoardsIcon />
-                <Text>
-                  {cardBoardName}
+              <Box
+                className="board-indicator"
+                onClick={() => changeActiveBoard(card.board)}
+              >
+                <Text color={color} className="board-indicator-text">
+                  <BoardsIcon />
+                  <Text>{cardBoardName}</Text>
                 </Text>
-              </Text>
-            </Box>
+              </Box>
             )}
           </Box>
           {this.renderCardDate()}
@@ -266,6 +270,14 @@ class MdynaCard extends PureComponent {
               backgroundColor: 'transparent',
             }}
           />
+          {card.seeMore && !isFocused && (
+            <div className="see-more-btn">
+              <Button onClick={() => focusCard({ ...card, text: card.fullText })}>
+              See More
+                <FocusIcon color={color} />
+              </Button>
+            </div>
+          )}
         </KeyboardEventHandler>
       </Box>
     );

diff --git 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
@@ -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 {
         )}
       </Box>
     ) : (
-      <Box className={cx('sync', (expanded && 'expanded') || (!syncSuccess && !lastSyncDate && 'collapsed'))}>
+      <Box className={cx('sync', (expanded && 'expanded') || 'collapsed')}>
         <Collapsible
           className="collapse"
           direction="horizontal"
@@ -227,7 +225,6 @@ GistSync.whyDidYouRender = true;
 GistSync.propTypes = {
   badge: PropTypes.bool,
   onClick: PropTypes.func,
-  skipLogin: PropTypes.bool,
   githubUserName: PropTypes.string.isRequired,
   githubPassword: PropTypes.string.isRequired,
   gistId: PropTypes.string.isRequired,
@@ -246,7 +243,6 @@ GistSync.defaultProps = {
   badge: false,
   onClick: null,
   lastSyncDate: '',
-  skipLogin: false,
 };
 
 export default GistSync;
diff --git a/app/components/Settings.jsx b/app/components/Settings.jsx
@@ -66,7 +66,6 @@ class Settings extends PureComponent {
       activeBoard,
       changeTheme,
       changeBoardName,
-      lastSyncDate,
       githubAuthOn,
       changeCwd,
       boards,
@@ -129,7 +128,7 @@ class Settings extends PureComponent {
                 <Button
                   color="brand"
                   onClick={() => {
-                    toast.success('Switched to White theme');
+                    toast.success('Switched to Light theme');
                     changeTheme('white');
                   }}
                 >
@@ -174,7 +173,7 @@ class Settings extends PureComponent {
                 <Button
                   color="brand"
                   onClick={() => {
-                    toast.success('Switched to Synth theme');
+                    toast.success('Switched to White theme');
                     changeTheme('flat');
                   }}
                 >
@@ -223,8 +222,6 @@ class Settings extends PureComponent {
                   }}
                 />
                 <GistSync
-                  skipLogin
-                  lastSyncDate={lastSyncDate}
                   githubAuthOn={githubAuthOn}
                 />
               </Box>
@@ -258,7 +255,6 @@ Settings.propTypes = {
   codeTheme: PropTypes.string,
   changeTheme: PropTypes.func,
   activeBoard: PropTypes.string.isRequired,
-  lastSyncDate: PropTypes.string,
   githubAuthOn: PropTypes.bool.isRequired,
   boardNames: PropTypes.array,
   cwd: PropTypes.string,
@@ -269,7 +265,6 @@ Settings.propTypes = {
 
 Settings.defaultProps = {
   changeCardsPerPage: null,
-  lastSyncDate: null,
   changeCwd: null,
   boardNames: [],
   toggleSettings: null,

diff --git a/app/components/Sidebar.jsx b/app/components/Sidebar.jsx
@@ -168,7 +168,6 @@ class Sidebar extends PureComponent {
       labels,
       order,
       removeLabelFilter,
-      lastSyncDate,
       githubAuthOn,
       sorting,
       toggleArchivedFilter,
@@ -299,7 +298,6 @@ class Sidebar extends PureComponent {
         </Box>
 
         <GistSync
-          lastSyncDate={lastSyncDate}
           githubAuthOn={githubAuthOn}
           onClick={() => {
             toggleSettings();
@@ -317,7 +315,7 @@ class Sidebar extends PureComponent {
 
   render() {
     const {
-      sidebarExpanded, toggleSidebar, toggleSettings, lastSyncDate, githubAuthOn,
+      sidebarExpanded, toggleSidebar, toggleSettings, githubAuthOn,
     } = this.props;
 
     return (
@@ -353,10 +351,8 @@ class Sidebar extends PureComponent {
         {sidebarExpanded ? this.expandedSidebar() : this.collapsedSidebar()}
         {!sidebarExpanded && (
           <GistSync
-            lastSyncDate={lastSyncDate}
             githubAuthOn={githubAuthOn}
             badge
-            skipLogin
             classname="sidebar-tooltip"
             onClick={() => {
               toggleSettings();
@@ -378,7 +374,6 @@ Sidebar.propTypes = {
   changeSorting: PropTypes.func.isRequired,
   clearArchive: PropTypes.func.isRequired,
   labelFilters: PropTypes.array,
-  lastSyncDate: PropTypes.string,
   githubAuthOn: PropTypes.bool.isRequired,
   labels: PropTypes.array.isRequired,
   order: PropTypes.string,
@@ -392,7 +387,6 @@ Sidebar.propTypes = {
 };
 
 Sidebar.defaultProps = {
-  lastSyncDate: null,
   activeBoard: 'INBOX',
   archivedFilterOn: false,
   labelFilters: [],

diff --git a/app/components/Sidebar.scss b/app/components/Sidebar.scss
@@ -34,6 +34,9 @@
       width: 100%;
     }
     .button {
+      &:hover {
+        color: currentColor;
+      }
       svg {
         margin: 0 5px;
       }

diff --git a/app/components/UI/LabelFilter.jsx b/app/components/UI/LabelFilter.jsx
@@ -34,7 +34,7 @@ class LabelFilter extends Component {
             primary
             color={!labelFilterActive ? 'brand' : 'accent-3'}
           >
-            <Labels label={{ title: label.title }} transparent />
+            <Labels label={{ title: label.title }} transparent active={labelFilterActive} />
           </Button>
         );
         clickableLabels.push(labelElement);

diff --git 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
@@ -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,
 }) => (
-  <span
+  <Text
+    color={color || active && 'accent-2' || 'dark-1'}
     style={{
-      color,
       backgroundColor: !transparent && '#333333AA',
       borderRadius: '10px',
       margin: '2px 5px',
@@ -22,36 +23,37 @@ export const Label = ({
     onClick={onClick}
   >
     {label}
-  </span>
+  </Text>
 );
 
 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;
       const labelFilterActive = label && label.title && labelFilters.indexOf(label.title) !== -1;
       const labelFunc = labelFilterActive ? removeLabelFilter : addLabelFilter;
       /* eslint-disable */
       return (
-        <span
+        <Text
+          color={color || labelFilterActive && 'accent-2' || 'dark-1'}
           style={{
-            // TODO: Use styled components or scss to convert do these
-            color: labelFilterActive ? tc(color).darken(15) : color,
             border: labelFilterActive && `2px solid ${tc(color).darken(15)}`,
             backgroundColor: !transparent && '#333333AA',
             borderRadius: '10px',
@@ -63,22 +65,22 @@ class Labels extends Component {
           onClick={() => labelFunc(label.title)}
         >
           {label.title || label}
-        </span>
+        </Text>
       );
       /* eslint-enable */
     }
     return (
-      <span
+      <Text
+        color={color || active && 'accent-2' || 'dark-1'}
         style={{
-          color,
           backgroundColor: !transparent && '#333333AA',
           borderRadius: '10px',
           padding: '5px',
         }}
         key={`label-${label.title || label}`}
       >
         {label.title || label}
-      </span>
+      </Text>
     );
   }
 
@@ -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: [],