Fixed some bookmark related stuff and updated the ChangeLog.md

ChangeLog.md

@@ -1,4 +1,9 @@
 # Changelog:
+* **26.05.21**
+    - Fixed automated builds
+    - Fixed the bookmark UI popout window
+    - Added a context menu for the general bookmark container
+  
 * **05.05.21**
     - Reworked the icon modal
     - Fixed some minor icon and avatar related issues

shared/js/Bookmarks.ts

@@ -300,6 +300,10 @@ export class BookmarkManager {
         this.doEditBookmark(uniqueId, newValues);
     }
 
+    directoryContents(uniqueId: string) : BookmarkEntry[] {
+        return this.registeredBookmarks.filter(bookmark => bookmark.parentEntry === uniqueId);
+    }
+
     deleteEntry(uniqueId: string) {
         const index = this.registeredBookmarks.findIndex(entry => entry.uniqueId === uniqueId);
         if(index === -1) {

shared/js/ui/modal/bookmarks/Controller.ts

@@ -17,7 +17,9 @@ import {server_connections} from "tc-shared/ConnectionManager";
 import {ConnectionHandler, ConnectionState} from "tc-shared/ConnectionHandler";
 import {LocalClientEntry} from "tc-shared/tree/Client";
 import _ from "lodash";
-import {LogCategory, logError} from "tc-shared/log";
+import {LogCategory, logError, logWarn} from "tc-shared/log";
+import {promptYesNo} from "tc-shared/ui/modal/yes-no/Controller";
+import {tra} from "tc-shared/i18n/localize";
 
 class BookmarkModalController {
     readonly events: Registry<ModalBookmarkEvents>;
@@ -194,7 +196,30 @@ class BookmarkModalController {
         }));
 
         /* events */
-        this.events.on("action_delete_bookmark", event => bookmarks.deleteEntry(event.uniqueId));
+        this.events.on("action_delete_bookmark", event => {
+            const entry = bookmarks.findBookmark(event.uniqueId);
+            if(!entry) {
+                logWarn(LogCategory.GENERAL, tr("Tried to delete an unknown bookmark entry %s."), event.uniqueId);
+                return;
+            }
+
+            const children = bookmarks.directoryContents(entry.uniqueId);
+            if(!event.force && entry.type === "directory" && children.length > 0) {
+                promptYesNo({
+                    title: tr("Are you sure?"),
+                    question: tra("Do you really want to delete the directory \"{0}\"?\nThe directory contains {1} entries.", entry.displayName, children.length)
+                }).then(result => {
+                    if(!result) {
+                        return;
+                    }
+
+                    this.events.fire("action_delete_bookmark", { uniqueId: entry.uniqueId, force: true });
+                });
+                return;
+            }
+
+            bookmarks.deleteEntry(event.uniqueId);
+        });
         this.events.on("action_create_bookmark", event => {
             if(!event.displayName) {
                 return;
@@ -215,10 +240,13 @@ class BookmarkModalController {
                 }
 
                 case "selected":
-                default:
                     parentBookmark = this.selectedBookmark?.parentEntry;
                     previousBookmark = this.selectedBookmark?.previousEntry;
                     break;
+
+                case "end":
+                default:
+                    break;
             }
 
             if(event.entryType === "bookmark") {

shared/js/ui/modal/bookmarks/Definitions.ts

@@ -55,11 +55,13 @@ export interface ModalBookmarkEvents {
             entry: string
         } | {
             type: "selected",
+        } | {
+            type: "end"
         },
         displayName: string | undefined
     },
     action_duplicate_bookmark: { uniqueId: string, displayName: string | undefined, originalName: string },
-    action_delete_bookmark: { uniqueId: string },
+    action_delete_bookmark: { uniqueId: string, force: boolean },
 
     action_connect: { uniqueId: string, newTab: boolean, closeModal: boolean },
 

shared/js/ui/modal/bookmarks/Renderer.tsx

@@ -31,8 +31,6 @@ import ServerInfoImage from "./serverinfo.png";
 import {IconTooltip} from "tc-shared/ui/react-elements/Tooltip";
 import {CountryCode} from "tc-shared/ui/react-elements/CountryCode";
 import {downloadTextAsFile, requestFileAsText} from "tc-shared/file/Utils";
-import {promptYesNo} from "tc-shared/ui/modal/yes-no/Controller";
-import {tra} from "tc-shared/i18n/localize";
 
 const EventContext = React.createContext<Registry<ModalBookmarkEvents>>(undefined);
 const VariableContext = React.createContext<UiVariableConsumer<ModalBookmarkVariables>>(undefined);
@@ -53,23 +51,6 @@ const BookmarkListEntryRenderer = React.memo((props: { entry: BookmarkListEntry
     const events = useContext(EventContext);
     const selectedItem = variables.useVariable("bookmarkSelected", undefined, undefined);
 
-    const tryDelete = () => {
-        if(props.entry.type === "directory" && props.entry.childCount > 0) {
-            promptYesNo({
-                title: tr("Are you sure?"),
-                question: tra("Do you really want to delete the directory \"{0}\"?\nThe directory contains {1} entries.", props.entry.displayName, props.entry.childCount)
-            }).then(result => {
-                if(!result) {
-                    return;
-                }
-
-                events.fire("action_delete_bookmark", { uniqueId: props.entry.uniqueId });
-            });
-        } else {
-            events.fire("action_delete_bookmark", { uniqueId: props.entry.uniqueId });
-        }
-    };
-
     let icon;
     if(props.entry.icon) {
         icon = <RemoteIconRenderer key={"icon-" + props.entry.icon.iconId} icon={getIconManager().resolveIconInfo(props.entry.icon)} className={cssStyle.icon} />;
@@ -98,7 +79,9 @@ const BookmarkListEntryRenderer = React.memo((props: { entry: BookmarkListEntry
         );
     }
     buttons.push(
-        <div className={cssStyle.button} key={"bookmark-remove"} title={tr("Delete entry")} onClick={tryDelete}>
+        <div className={cssStyle.button} key={"bookmark-remove"} title={tr("Delete entry")} onClick={() => {
+            events.fire("action_delete_bookmark", { uniqueId: props.entry.uniqueId, force: false });
+        }}>
             <ClientIconRenderer icon={ClientIcon.Delete} />
         </div>
     );
@@ -184,7 +167,7 @@ const BookmarkListEntryRenderer = React.memo((props: { entry: BookmarkListEntry
                         type: "normal",
                         label: props.entry.type === "bookmark" ? tr("Delete bookmark") : tr("Delete directory"),
                         icon: ClientIcon.BookmarkRemove,
-                        click: tryDelete
+                        click: () => events.fire("action_delete_bookmark", { uniqueId: props.entry.uniqueId, force: false })
                     }
                 ]);
             }}
@@ -209,7 +192,31 @@ const BookmarkList = React.memo(() => {
     const bookmarks = bookmarksInfo.status === "loaded" ? bookmarksInfo.value : [];
 
     return (
-        <div className={cssStyle.containerBookmarks}>
+        <div
+            className={cssStyle.containerBookmarks}
+            onContextMenu={event => {
+                event.preventDefault();
+
+                if(bookmarks.length === 0) {
+                    return;
+                }
+
+                spawnContextMenu({ pageX: event.pageX, pageY: event.pageY }, [
+                    {
+                        type: "normal",
+                        label: tr("Add bookmark"),
+                        icon: ClientIcon.BookmarkAdd,
+                        click: () => events.fire("action_create_bookmark", { entryType: "bookmark", order: { type: "end" }, displayName: undefined })
+                    },
+                    {
+                        type: "normal",
+                        label: tr("Add directory"),
+                        icon: ClientIcon.BookmarkAddFolder,
+                        click: () => events.fire("action_create_bookmark", { entryType: "directory", order: { type: "end" }, displayName: undefined })
+                    },
+                ]);
+            }}
+        >
             {bookmarks.map(entry => <BookmarkListEntryRenderer entry={entry} key={"entry-" + entry.uniqueId} />)}
             <div key={"overlay-loading"} className={cssStyle.overlay + " " + (bookmarksInfo.status === "loaded" ? "" : cssStyle.shown)}>
                 <div className={cssStyle.text}><Translatable>loading</Translatable> <LoadingDots /></div>