Fix minor layouting issues

Update dependencies Add hero image
flopes89 · Apr 4, 2019 · 3a736bc · 3a736bc
1 parent 4c697f0
commit 3a736bc
Show file tree

Hide file tree

Showing 12 changed files with 3,975 additions and 2,108 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
  [![Build Status](https://travis-ci.org/flopes89/tikett.svg?branch=master)](https://travis-ci.org/flopes89/tikett)
 
-Offline file tagging software.
+![tikett : Offline File Tagging Software](./docs/hero_image.png)
 
 ## Installation
 

diff --git a/docs/hero_image.pdn b/docs/hero_image.pdn
diff --git a/docs/hero_image.png b/docs/hero_image.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "tikett",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "main": "index.js",
     "bin": "index.js",
     "scripts": {
@@ -13,57 +13,57 @@
         "start": "node index.js"
     },
     "dependencies": {
-        "body-parser": "1.18.3",
-        "express": "4.16.4",
-        "express-graphql": "0.7.1",
-        "glob": "7.1.3",
-        "graphql": "14.0.2",
-        "lodash": "4.17.11",
-        "opn": "5.4.0",
-        "windows-drive-letters": "3.1.0",
-        "winston": "3.1.0"
+        "body-parser": "^1.18.3",
+        "express": "^4.16.4",
+        "express-graphql": "^0.7.1",
+        "glob": "^7.1.3",
+        "graphql": "^14.2.1",
+        "lodash": "^4.17.11",
+        "opn": "^5.5.0",
+        "windows-drive-letters": "^3.1.0",
+        "winston": "^3.2.1"
     },
     "devDependencies": {
-        "@babel/core": "7.1.6",
-        "@babel/preset-env": "7.1.6",
-        "@babel/preset-react": "7.0.0",
-        "@githubprimer/octicons-react": "8.1.3",
-        "apollo-boost": "0.1.22",
-        "autoprefixer": "9.3.1",
-        "babel-loader": "8.0.4",
-        "bootstrap": "4.3.1",
-        "classnames": "2.2.6",
-        "cross-env": "5.2.0",
-        "css-loader": "1.0.1",
-        "express-reload": "1.2.0",
-        "fs-extra": "7.0.1",
-        "graphql-tag": "2.10.0",
-        "jest": "24.0.0",
-        "jquery": "3.3.1",
-        "node-sass": "4.10.0",
-        "nodemon": "1.18.7",
-        "pkg": "4.3.5",
-        "popper.js": "1.14.7",
-        "postcss-loader": "3.0.0",
-        "precss": "4.0.0",
-        "prop-types": "15.6.2",
-        "react": "16.8.3",
-        "react-apollo": "2.3.2",
-        "react-beautiful-dnd": "10.0.3",
-        "react-color": "2.17.0",
-        "react-dom": "16.8.3",
-        "react-redux": "5.1.1",
-        "react-tag-autocomplete": "5.8.0",
-        "reactstrap": "6.5.0",
-        "recompose": "0.30.0",
-        "redux": "4.0.1",
-        "redux-devtools": "3.4.2",
-        "sass-loader": "7.1.0",
-        "style-loader": "0.23.1",
-        "uuid": "3.3.2",
-        "webpack": "4.26.0",
-        "webpack-cli": "3.1.2",
-        "webpack-livereload-plugin": "2.1.1"
+        "@babel/core": "^7.4.3",
+        "@babel/preset-env": "^7.4.3",
+        "@babel/preset-react": "^7.0.0",
+        "@githubprimer/octicons-react": "^8.5.0",
+        "apollo-boost": "^0.1.28",
+        "autoprefixer": "^9.5.0",
+        "babel-loader": "^8.0.5",
+        "bootstrap": "^4.3.1",
+        "classnames": "^2.2.6",
+        "cross-env": "^5.2.0",
+        "css-loader": "^1.0.1",
+        "express-reload": "^1.2.0",
+        "fs-extra": "^7.0.1",
+        "graphql-tag": "^2.10.1",
+        "jest": "^24.7.1",
+        "jquery": "^3.3.1",
+        "node-sass": "^4.11.0",
+        "nodemon": "^1.18.10",
+        "pkg": "^4.3.7",
+        "popper.js": "^1.15.0",
+        "postcss-loader": "^3.0.0",
+        "precss": "^4.0.0",
+        "prop-types": "^15.7.2",
+        "react": "^16.8.6",
+        "react-apollo": "^2.5.3",
+        "react-beautiful-dnd": "^10.1.1",
+        "react-color": "^2.17.0",
+        "react-dom": "^16.8.6",
+        "react-redux": "^5.1.1",
+        "react-tag-autocomplete": "^5.9.0",
+        "reactstrap": "^6.5.0",
+        "recompose": "^0.30.0",
+        "redux": "^4.0.1",
+        "redux-devtools": "^3.5.0",
+        "sass-loader": "^7.1.0",
+        "style-loader": "^0.23.1",
+        "uuid": "^3.3.2",
+        "webpack": "^4.29.6",
+        "webpack-cli": "^3.3.0",
+        "webpack-livereload-plugin": "^2.2.0"
     },
     "babel": {
         "presets": [

diff --git a/src/app.js b/src/app.js
@@ -12,19 +12,18 @@ export default () => (
     <React.Fragment>
         <header>
             <Navbar dark className="bg-dark mb-3">
-                <Container fluid>
-                    <NavbarBrand tag="a" href="/">
-                        <h1><Octicon icon={Tag} size="medium" /> tikett</h1>
-                    </NavbarBrand>
-                    <Row>
-                        <Col>
-                            <ReloadButton />
-                        </Col>
-                        <Col>
-                            <SetRoot />
-                        </Col>
-                    </Row>
-                </Container>
+                <Row style={{ flexGrow: 1 }} className="align-items-center no-gutters">
+                    <Col>
+                        <NavbarBrand tag="a" href="/">
+                            <h1><Octicon icon={Tag} size="medium" /> tikett</h1>
+                        </NavbarBrand>
+                    </Col>
+                    <Col className="text-right">
+                        <ReloadButton />
+                        &nbsp;
+                        <SetRoot />
+                    </Col>
+                </Row>
             </Navbar>
         </header>
         <main>

diff --git a/src/components/files/filter.js b/src/components/files/filter.js
@@ -45,7 +45,7 @@ const renderFilter = (provided, snapshot, props) => {
 
 const Filter = (props) => (
     <Row>
-        <Col xs={1}>
+        <Col xs={3}>
             <strong>Filters</strong>
         </Col>
         <Col>

diff --git a/src/components/files/index.js b/src/components/files/index.js
@@ -14,7 +14,7 @@ const Files = (props) => (
             <Col>
                 <Filter />
             </Col>
-            <Col xs={2}>
+            <Col xs={4} className="text-right">
                 <Label check className="pl-2">
                     <Input
                         type="checkbox"

diff --git a/src/components/groups/colorPicker.js b/src/components/groups/colorPicker.js
@@ -18,7 +18,7 @@ const ColorPicker = (props) => {
 
     return (
         <React.Fragment>
-            <a className="ml-2" href="#" onClick={() => setIsOpen(true)} id={"colorPicker_" + props.group}>
+            <a href="#" onClick={() => setIsOpen(true)} id={"colorPicker_" + props.group}>
                 <Octicon icon={Paintcan} verticalAlign="middle" />
             </a>
             <Popover isOpen={isOpen} target={"colorPicker_" + props.group} toggle={() => setIsOpen(!isOpen)}>

diff --git a/src/components/groups/tagGroup.js b/src/components/groups/tagGroup.js
@@ -7,8 +7,28 @@ import { Mutation } from "../util";
 import queries from "../../queries";
 import { Droppable } from "react-beautiful-dnd";
 import ColorPicker from "./colorPicker";
+import classnames from "classnames";
+import { connect } from "react-redux";
 
-const TagGroup = (props) => (
+const renderTagGroup = (provided, snapshot, props) => {
+    const classes = classnames("tag_group", {
+        "drop_ready": props.isDragging,
+        "drag_over": snapshot.isDraggingOver,
+    });
+
+    return (
+        <div
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+            className={classes}
+        >
+            <Tags tags={props.tags} color={props.color} />
+            {provided.placeholder}
+        </div>
+    );
+};
+
+let TagGroup = (props) => (
     <Mutation
         mutation={queries.REMOVE_TAG_GROUP}
         variables={{ group: props.name }}
@@ -21,29 +41,20 @@ const TagGroup = (props) => (
                 <Row>
                     <Col>
                         <strong>{props.name}</strong>
+                        &nbsp;
                         <ColorPicker group={props.name} color={props.color} />
-                    </Col>
-                    {props.name !== "Ungrouped" && (
-                        <Col>
+                        &nbsp;
+                        {props.name !== "Ungrouped" && (
                             <a href="#" onClick={mutate}>
                                 <Octicon icon={Trashcan} />
                             </a>
-                        </Col>
-                    )}
+                        )}
+                    </Col>
                 </Row>
                 <Row>
                     <Col>
                         <Droppable droppableId={"tagGroup|" + props.name}>
-                            {(provided) => (
-                                <div
-                                    ref={provided.innerRef}
-                                    {...provided.droppableProps}
-                                    className="tag_group"
-                                >
-                                    <Tags tags={props.tags} color={props.color} />
-                                    {provided.placeholder}
-                                </div>
-                            )}
+                            {(provided, snapshot) => renderTagGroup(provided, snapshot, props)}
                         </Droppable>
                     </Col>
                 </Row>
@@ -52,6 +63,12 @@ const TagGroup = (props) => (
     </Mutation>
 );
 
+TagGroup = connect(
+    (state) => ({
+        isDragging: state.global.isDraggingTag,
+    })
+)(TagGroup);
+
 TagGroup.propTypes = {
     name: PropTypes.string.isRequired,
     tags: PropTypes.arrayOf(PropTypes.string),

diff --git a/src/responders.js b/src/responders.js
@@ -53,7 +53,7 @@ export const onDragEnd = (client_, store_) => (dropResult_) => {
             ]
         })
     } else if (destType === "filter") {
-        store_.dispatch(addFilter(`${tagName}${tagColor}`));
+        store_.dispatch(addFilter(`${tagName}#${tagColor}`));
     }
 
     store_.dispatch(endTagDrag());

diff --git a/src/style/main.scss b/src/style/main.scss
@@ -9,9 +9,6 @@ a, a:hover {
     color: inherit;
 }
 
-*:focus {
-}
-
 .tag {
     margin-right: 5px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,9 +9,6 @@ a, a:hover { @@
         color: inherit;
     }
-    *:focus {
-    }
     .tag {
         margin-right: 5px;
@@ Expand Down @@