chore(react/ribbon): disable when view mode is not good

apps/client/src/widgets/containers/ribbon_container.ts

@@ -28,79 +28,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         this.buttonWidgets = [];
     }
 
-    isEnabled() {
-        return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default";
-    }
-
-    button(widget: ButtonWidget) {
-        super.child(widget);
-
-        this.buttonWidgets.push(widget);
-
-        return this;
-    }
-
-    doRender() {
-        this.$tabContainer = this.$widget.find(".ribbon-tab-container");
-        this.$buttonContainer = this.$widget.find(".ribbon-button-container");
-        this.$bodyContainer = this.$widget.find(".ribbon-body-container");
-
-        for (const buttonWidget of this.buttonWidgets) {
-            this.$buttonContainer.append(buttonWidget.render());
-        }
-    }
-
-    async noteSwitched() {
-        this.lastActiveComponentId = null;
-
-        await super.noteSwitched();
-    }
-
-    async refreshWithNote(note: FNote, noExplicitActivation = false) {
-        this.lastNoteType = note.type;
-
-        let $ribbonTabToActivate, $lastActiveRibbon;
-
-        this.$tabContainer.empty();
-
-        for (const ribbonWidget of this.ribbonWidgets) {
-            // TODO: Base class for ribbon widget
-            const ret = await (ribbonWidget as any).getTitle(note);
-
-            if (!ret.show) {
-                continue;
-            }
-
-            const $ribbonTitle = $('<div class="ribbon-tab-title">')
-                .attr("data-ribbon-component-id", ribbonWidget.componentId)
-                .attr("data-ribbon-component-name", (ribbonWidget as any).name as string) // TODO: base class for ribbon widgets
-                .append(
-                    $('<span class="">')
-                        .attr("data-toggle-command", (ribbonWidget as any).toggleCommand)
-                )
-
-            this.$tabContainer.append('');
-
-            if (ret.activate && !this.lastActiveComponentId && !$ribbonTabToActivate && !noExplicitActivation) {
-                $ribbonTabToActivate = $ribbonTitle;
-            }
-
-            if (this.lastActiveComponentId === ribbonWidget.componentId) {
-                $lastActiveRibbon = $ribbonTitle;
-            }
-        }
-
-        if (!$ribbonTabToActivate) {
-            $ribbonTabToActivate = $lastActiveRibbon;
-        }
-
-        if ($ribbonTabToActivate) {
-            this.toggleRibbonTab($ribbonTabToActivate, false);
-        } else {
-            this.$bodyContainer.find(".ribbon-body").removeClass("active");
-        }
-    }
-
     isRibbonTabActive(name: string) {
         const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`);
 

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -187,6 +187,8 @@ export default function Ribbon() {
 
     return (
         <div className="ribbon-container" style={{ contain: "none" }}>
+            {noteContext?.viewScope?.viewMode === "default" && (
+                <>
                     <div className="ribbon-top-row">
                         <div className="ribbon-tab-container">
                             {filteredTabs.map(({ title, icon, index, toggleCommand }) => (
@@ -231,6 +233,8 @@ export default function Ribbon() {
                             })}
                         </div>
                     </div>
+                </>
+            )}
         </div>
     )
 }