Changed some messages and buttons to make it easier to open bookmarks editor

2021-12-02 14:12:23 +01:00 · 2021-12-02 14:12:23 +01:00 · 068c8ab2e7
commit 068c8ab2e7
parent 2ca90a18e1
10 changed files with 76 additions and 82 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,6 @@
+### v2.1.1 (TBA)
+- Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))
+
 ### v2.1.0 (2021-11-26)
 - Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
 - Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))
--- a/client/src/components/Apps/AppTable/AppTable.module.css
+++ b/client/src/components/Apps/AppTable/AppTable.module.css
@ -1,29 +0,0 @@
-.TableActions {
-  display: flex;
-  align-items: center;
-}
-
-.TableAction {
-  width: 22px;
-}
-
-.TableAction:hover {
-  cursor: pointer;
-}
-
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}
--- a/client/src/components/Apps/AppTable/AppTable.tsx
+++ b/client/src/components/Apps/AppTable/AppTable.tsx
@ -17,8 +17,7 @@ import { actionCreators } from '../../../store';
 import { App } from '../../../interfaces';

 // Other
-import classes from './AppTable.module.css';
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';

 interface Props {
@ -89,7 +88,7 @@ export const AppTable = (props: Props): JSX.Element => {

  return (
    <Fragment>
-      <div className={classes.Message}>
+      <Message isPrimary={false}>
        {config.useOrdering === 'orderId' ? (
          <p>You can drag and drop single rows to reorder application</p>
        ) : (
@ -98,7 +97,7 @@ export const AppTable = (props: Props): JSX.Element => {
            <Link to="/settings/interface">settings</Link>
          </p>
        )}
-      </div>
+      </Message>

      <DragDropContext onDragEnd={dragEndHanlder}>
        <Droppable droppableId="apps">
--- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
+++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
@ -22,7 +22,10 @@ interface Props {
 export const BookmarkCard = (props: Props): JSX.Element => {
  const { category, fromHomepage = false } = props;

-  const { config } = useSelector((state: State) => state.config);
+  const {
+    config: { config },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);

  const dispatch = useDispatch();
  const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
@ -30,9 +33,11 @@ export const BookmarkCard = (props: Props): JSX.Element => {
  return (
    <div className={classes.BookmarkCard}>
      <h3
-        className={fromHomepage ? '' : classes.BookmarkHeader}
+        className={
+          fromHomepage || !isAuthenticated ? '' : classes.BookmarkHeader
+        }
        onClick={() => {
-          if (!fromHomepage) {
+          if (!fromHomepage && isAuthenticated) {
            setEditCategory(category);
          }
        }}
--- a/client/src/components/Bookmarks/Bookmarks.tsx
+++ b/client/src/components/Bookmarks/Bookmarks.tsx
@ -14,7 +14,14 @@ import { Category, Bookmark } from '../../interfaces';
 import classes from './Bookmarks.module.css';

 // UI
-import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
+import {
+  Container,
+  Headline,
+  ActionButton,
+  Spinner,
+  Modal,
+  Message,
+} from '../UI';

 // Components
 import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
@ -121,6 +128,11 @@ export const Bookmarks = (props: Props): JSX.Element => {
    }
  };

+  const finishEditing = () => {
+    setShowTable(false);
+    setEditCategory(null);
+  };
+
  return (
    <Container>
      <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
@ -150,14 +162,24 @@ export const Bookmarks = (props: Props): JSX.Element => {
            icon="mdiPencil"
            handler={() => showTableForEditing(ContentType.category)}
          />
-          <ActionButton
-            name="Edit Bookmarks"
-            icon="mdiPencil"
-            handler={() => showTableForEditing(ContentType.bookmark)}
-          />
+          {showTable && tableContentType === ContentType.bookmark && (
+            <ActionButton
+              name="Finish Editing"
+              icon="mdiPencil"
+              handler={finishEditing}
+            />
+          )}
        </div>
      )}

+      {categories.length && isAuthenticated && !showTable ? (
+        <Message isPrimary={false}>
+          Click on category name to edit its bookmarks
+        </Message>
+      ) : (
+        <></>
+      )}
+
      {loading ? (
        <Spinner />
      ) : !showTable ? (
--- a/client/src/components/Bookmarks/Table/BookmarksTable.tsx
+++ b/client/src/components/Bookmarks/Table/BookmarksTable.tsx
@ -15,11 +15,8 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { Bookmark, Category } from '../../../interfaces';

-// CSS
-import classes from './Table.module.css';
-
 // UI
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 import { bookmarkTemplate } from '../../../utility';

@ -108,18 +105,14 @@ export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
  return (
    <Fragment>
      {!categoryInEdit ? (
-        <div className={classes.Message}>
-          <p>
-            Switch to grid view and click on the name of category you want to
-            edit
-          </p>
-        </div>
+        <Message isPrimary={false}>
+          Switch to grid view and click on the name of category you want to edit
+        </Message>
      ) : (
-        <div className={classes.Message}>
-          <p>
-            Editing bookmarks from <span>{categoryInEdit.name}</span> category
-          </p>
-        </div>
+        <Message isPrimary={false}>
+          Editing bookmarks from&nbsp;<span>{categoryInEdit.name}</span>
+          &nbsp;category
+        </Message>
      )}

      {categoryInEdit && (
--- a/client/src/components/Bookmarks/Table/CategoryTable.tsx
+++ b/client/src/components/Bookmarks/Table/CategoryTable.tsx
@ -16,11 +16,8 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { Bookmark, Category } from '../../../interfaces';

-// CSS
-import classes from './Table.module.css';
-
 // UI
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';

 interface Props {
@ -99,7 +96,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {

  return (
    <Fragment>
-      <div className={classes.Message}>
+      <Message isPrimary={false}>
        {config.useOrdering === 'orderId' ? (
          <p>You can drag and drop single rows to reorder categories</p>
        ) : (
@ -108,7 +105,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
            <Link to="/settings/interface">settings</Link>
          </p>
        )}
-      </div>
+      </Message>

      <DragDropContext onDragEnd={dragEndHanlder}>
        <Droppable droppableId="categories">
--- a/client/src/components/Bookmarks/Table/Table.module.css
+++ b/client/src/components/Bookmarks/Table/Table.module.css
@ -1,17 +0,0 @@
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a,
-.Message span {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}
--- a/client/src/components/UI/Text/Message/Message.module.css
+++ b/client/src/components/UI/Text/Message/Message.module.css
@ -6,3 +6,21 @@
  color: var(--color-accent);
  font-weight: 600;
 }
+
+.messageCenter {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.messageCenter a,
+.messageCenter span {
+  color: var(--color-accent);
+}
+
+.messageCenter a:hover {
+  cursor: pointer;
+}
--- a/client/src/components/UI/Text/Message/Message.tsx
+++ b/client/src/components/UI/Text/Message/Message.tsx
@ -4,8 +4,11 @@ import classes from './Message.module.css';

 interface Props {
  children: ReactNode;
+  isPrimary?: boolean;
 }

-export const Message = ({ children }: Props): JSX.Element => {
-  return <p className={classes.message}>{children}</p>;
+export const Message = ({ children, isPrimary = true }: Props): JSX.Element => {
+  const style = isPrimary ? classes.message : classes.messageCenter;
+
+  return <p className={style}>{children}</p>;
 };