changelog

Author: RafaelGB

docs/docs/changelog.md

@@ -1,6 +1,10 @@
 ## 1.7.1
 ### Improved
 - Now select source tags will be ordered alphabetically and the number of tags will be shown. [ISSUE#76](https://github.com/RafaelGB/obsidian-db-folder/issues/76)
+## Visual
+- Tag options supports dark mode [PR](https://github.com/RafaelGB/obsidian-db-folder/pull/133)[ISSUE#124](https://github.com/RafaelGB/obsidian-db-folder/issues/124) [artisticat1](https://github.com/artisticat1)
+- Freeze column gap fixed [ISSUE#120](https://github.com/RafaelGB/obsidian-db-folder/issues/120) [artisticat1](https://github.com/artisticat1)
+- Improvements of compact row mode [artisticat1](https://github.com/artisticat1)
 ### No longer broken
 - More that one filter can be applied again to the same source. [ISSUE#113](https://github.com/RafaelGB/obsidian-db-folder/issues/113)
 - You can not order by tags because was not prepared to do it yet (crashed). [ISSUE#119](https://github.com/RafaelGB/obsidian-db-folder/issues/119)

src/components/HeaderMenu.tsx

@@ -23,6 +23,7 @@ import { ColumnModal } from "./modals/ColumnModal";
 import { HeaderMenuProps } from "cdm/HeaderModel";
 import header_action_button_section from "components/headerActions/HeaderActionButtonSection";
 import { HeaderActionResponse } from "cdm/HeaderActionModel";
+import header_action_types_section from "components/headerActions/HeaderActiontypesSection";
 
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   /** state of width columns */
@@ -80,9 +81,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   /**
    * Array of action buttons asociated to the header
    */
-  const initButtons: any[] = [];
   let headerActionResponse: HeaderActionResponse = {
-    buttons: initButtons,
+    buttons: [],
     headerMenuProps: headerMenuProps,
     hooks: {
       setSortBy: setSortBy,
@@ -93,11 +93,26 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       setKeyState: setkeyState,
     },
   };
-  headerActionResponse = header_action_button_section.run(headerActionResponse);
+  const headerButtons =
+    header_action_button_section.run(headerActionResponse).buttons;
 
   /**
    * Array of type headers available to change the data type of the column
    */
+  headerActionResponse = {
+    buttons: [],
+    headerMenuProps: headerMenuProps,
+    hooks: {
+      setSortBy: setSortBy,
+      setExpanded: setExpanded,
+      setColumnWidthState: setColumnWidthState,
+      columnWidthState: columnWidthState,
+      keyState: keyState,
+      setKeyState: setkeyState,
+    },
+  };
+  const typesTest =
+    header_action_types_section.run(headerActionResponse).buttons;
   const types = [
     {
       onClick: (e: any) => {
@@ -177,22 +192,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       icon: <CalendarTimeIcon />,
       label: MetadataLabels.CALENDAR_TIME,
     },
-    ,
-    {
-      onClick: (e: any) => {
-        dispatch({
-          type: ActionTypes.UPDATE_COLUMN_TYPE,
-          columnId: column.id,
-          dataType: DataTypes.CHECKBOX,
-        });
-        setShowType(false);
-        setExpanded(false);
-      },
-      icon: <TaskIcon />,
-      label: DataTypes.CHECKBOX,
-    },
   ];
-
+  types.push(...typesTest);
   const typePopper = usePopper(typeReferenceElement, typePopperElement, {
     placement: "right",
     strategy: "fixed",
@@ -382,7 +383,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 padding: "4px 0px",
               }}
             >
-              {headerActionResponse.buttons.map((button) => (
+              {headerButtons.map((button) => (
                 <div
                   key={button.label}
                   className="menu-item sort-button"

src/components/headerActions/HeaderActiontypesSection.ts

@@ -2,16 +2,15 @@ import { HeaderActionResponse } from "cdm/HeaderActionModel";
 import { AbstractChain, AbstractHandler } from "patterns/AbstractFactoryChain";
 import CheckboxTypeHandlerAction from "components/headerActions/handlers/types/CheckboxTypeHeaderAction";
 class HeaderActionTypesSection extends AbstractChain<HeaderActionResponse> {
-src/.tsx
     protected customHandle(abstractResponse: HeaderActionResponse): HeaderActionResponse {
-    return abstractResponse;
-}
+        return abstractResponse;
+    }
 
-    protected getHandlers(): AbstractHandler < HeaderActionResponse > [] {
-    return [
-        new CheckboxTypeHandlerAction
-    ];
-}
+    protected getHandlers(): AbstractHandler<HeaderActionResponse>[] {
+        return [
+            new CheckboxTypeHandlerAction()
+        ];
+    }
 }
 
 const header_action_types_section = new HeaderActionTypesSection();

src/components/headerActions/handlers/types/CheckboxTypeHeaderAction.tsx

@@ -6,14 +6,32 @@ import ArrowUpIcon from "components/img/ArrowUp";
 import ArrowDownIcon from "components/img/ArrowDown";
 import React from "react";
 import { ActionTypes, DataTypes } from "helpers/Constants";
+import TaskIcon from "components/img/TaskIcon";
 
 export default class CheckboxTypeHandlerAction extends AbstractHeaderAction {
   globalHeaderActionResponse: HeaderActionResponse;
   handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
     this.globalHeaderActionResponse = headerActionResponse;
-    const { column } =
-      this.globalHeaderActionResponse.headerMenuProps.headerProps;
-
+    this.addCheckboxType();
     return this.goNext(this.globalHeaderActionResponse);
   }
+  private addCheckboxType() {
+    const { hooks } = this.globalHeaderActionResponse;
+    const { initialState, column } =
+      this.globalHeaderActionResponse.headerMenuProps.headerProps;
+    const checkBoxType = {
+      onClick: (e: any) => {
+        initialState.dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.CHECKBOX,
+        });
+        hooks.setShowType(false);
+        hooks.setExpanded(false);
+      },
+      icon: <TaskIcon />,
+      label: DataTypes.CHECKBOX,
+    };
+    this.globalHeaderActionResponse.buttons.push(checkBoxType);
+  }
 }