Plain UI for script editor use

mcneel · Aug 27, 2024 · f28a427 · f28a427
1 parent d0d5a07
commit f28a427
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 43 deletions.
diff --git a/quasar_site/src/layouts/MainLayout.vue b/quasar_site/src/layouts/MainLayout.vue
@@ -1,5 +1,6 @@
 <template>
     <q-layout view="hHh Lpr lff">
+      <template v-if="!forScriptEditor">
       <q-header elevated>
         <q-toolbar>
           <q-btn flat dense round icon="menu" aria-label="Menu" @click="leftDrawerOpen = !leftDrawerOpen" />
@@ -40,28 +41,29 @@
           </template>
         </q-banner>
       </q-header>
-      <q-drawer v-model="leftDrawerOpen" behavior="desktop" show-if-above bordered id="myDrawer" :width="drawerWidth"
-        @mouseover="() => shouldAutoScroll = false" @mouseout="() => shouldAutoScroll = true">
-        <q-tree no-transition ref=myTree :nodes="api" accordion dense node-key="path" selected-color="accent" :filter="filterVersion" :filter-method="filterTocByVersion"
-          v-model:selected="selectedNode" v-model:expanded="expanded" :duration="200" @lazy-load="onLazyLoad">
-          <template v-slot:default-header="prop" >
-            <div class="row items-center">
-              <a :id="`TOC:${prop.node.path}`" :class="prop.node.deprecated ? 'toc-deprecated' : ''" >{{ prop.node.label }}
-              </a>
-            </div>
-          </template>
-          <template v-slot:header-secondary="prop">
-            <div class="row items-center">
-                <router-link :id="`TOC:${prop.node.path}`" class="toc-secondary-header"
-                  style="text-decoration: none; color: inherit;" :class="prop.node.deprecated ? 'toc-deprecated' : ''"
-                  :to="baseUrl + prop.node.path.toLowerCase()" ><span>{{ prop.node.label }}</span>
-                  <!--<span class="text-weight-light">{{ prop.node.labelSecondary }}</span>--> <!--hiding overloads: WWW-2046-->
-                </router-link>
-            </div>
-          </template>
-        </q-tree>
-        <div v-touch-pan.preserveCursor.prevent.mouse.horizontal="resizeDrawer" class="q-drawer__resizer"></div>
-      </q-drawer>
+        <q-drawer v-model="leftDrawerOpen" behavior="desktop" show-if-above bordered id="myDrawer" :width="drawerWidth"
+          @mouseover="() => shouldAutoScroll = false" @mouseout="() => shouldAutoScroll = true">
+          <q-tree no-transition ref=myTree :nodes="api" accordion dense node-key="path" selected-color="accent" :filter="filterVersion" :filter-method="filterTocByVersion"
+            v-model:selected="selectedNode" v-model:expanded="expanded" :duration="200" @lazy-load="onLazyLoad">
+            <template v-slot:default-header="prop" >
+              <div class="row items-center">
+                <a :id="`TOC:${prop.node.path}`" :class="prop.node.deprecated ? 'toc-deprecated' : ''" >{{ prop.node.label }}
+                </a>
+              </div>
+            </template>
+            <template v-slot:header-secondary="prop">
+              <div class="row items-center">
+                  <router-link :id="`TOC:${prop.node.path}`" class="toc-secondary-header"
+                    style="text-decoration: none; color: inherit;" :class="prop.node.deprecated ? 'toc-deprecated' : ''"
+                    :to="baseUrl + prop.node.path.toLowerCase()" ><span>{{ prop.node.label }}</span>
+                    <!--<span class="text-weight-light">{{ prop.node.labelSecondary }}</span>--> <!--hiding overloads: WWW-2046-->
+                  </router-link>
+              </div>
+            </template>
+          </q-tree>
+          <div v-touch-pan.preserveCursor.prevent.mouse.horizontal="resizeDrawer" class="q-drawer__resizer"></div>
+        </q-drawer>
+      </template>
       <q-page-container id="pageContainer">
         <router-view v-show="!searchText" />
         <SearchPage :query="searchText" :base-url="baseUrl" v-show="searchText" />
@@ -101,6 +103,7 @@ export default {
       shouldAutoScroll: true,
       bannerVisible: true,
       filterVersion: `${mostRecent.split(".")[0]}.x`,
+      forScriptEditor: false,
       $q
     };
   },
@@ -111,10 +114,13 @@ export default {
     if (this.$route.query.version){
         this.onChangeVersionFilter(this.$route.query.version);
     }
-      const wasDark = localStorage.getItem('darkMode');
-      if (this.$q.dark.isActive.toString() != wasDark){
-        this.$q.dark.toggle()
-      }
+    if (this.$route.query.plain) {
+        this.forScriptEditor = true;
+    }
+    const wasDark = localStorage.getItem('darkMode');
+    if (this.$q.dark.isActive.toString() != wasDark){
+      this.$q.dark.toggle()
+    }
   },
   methods: {
     onChangeVersionFilter (item) {
@@ -175,22 +181,26 @@ export default {
   watch: {
     selectedNode: function (newState, oldState) {
       console.log("node selected:", newState)
-      const node = this.$refs.myTree.getNodeByKey(newState);
 
-      //Set scoll height when selected. only doing this on fresh load
-      if (this.shouldAutoScroll) {
-        this.$nextTick(() => {
-          const el = document.getElementById(`TOC:${node.path}`)
-          if (el) {
-            el.scrollIntoView({
-              behavior: 'auto',
-              block: 'center',
-              inline: 'center'
-            })
-            const target = getScrollTarget(el);
-            target.scrollLeft = 0;
-          }
-        })
+      if(!this.forScriptEditor)
+      {
+        const node = this.$refs.myTree.getNodeByKey(newState);
+
+        //Set scoll height when selected. only doing this on fresh load
+        if (this.shouldAutoScroll) {
+          this.$nextTick(() => {
+            const el = document.getElementById(`TOC:${node.path}`)
+            if (el) {
+              el.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'center'
+              })
+              const target = getScrollTarget(el);
+              target.scrollLeft = 0;
+            }
+          })
+        }
       }
 
       if (!this.watcherEnabled)

diff --git a/quasar_site/src/pages/MemberDetail.vue b/quasar_site/src/pages/MemberDetail.vue
@@ -2,7 +2,7 @@
   <q-page>
     <div class="q-pa-sm">
       <template v-if="members && members.items && members.items.length>0">
-        <div style="height: 130px"></div>
+        <div style="height: 130px" v-if="!forScriptEditor"></div>
         <q-list>
           <div v-for="(member, index) in members.items" :key="index" :id="ViewModel.signatureAnchorRef(member.signature)" style="transition: opacity 1s" :style="activeId && activeId != ViewModel.signatureAnchorRef(member.signature) ? 'opacity: 50%' : 'opacity: 100%'" >
             <q-item>
@@ -225,7 +225,7 @@
     </div>
 
     <!-- place QPageSticky at end of page -->
-    <q-page-sticky v-if="members && members.items && members.items.length>0" expand position="top" :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'" style="max-height: 125px; overflow: hidden;">
+    <q-page-sticky v-if="!forScriptEditor && members && members.items && members.items.length>0" expand position="top" :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'" style="max-height: 125px; overflow: hidden;">
 
       <div class="flex-break q-pa-sm flex justify-between">
             <div>
@@ -317,6 +317,7 @@ export default {
       members: {},
       version: mostRecent,
       activeId: null,
+      forScriptEditor: false,
     };
   },
   mixins: [
@@ -343,6 +344,10 @@ export default {
     console.log("mounted member detail");
     this.renderUrl(this.$route);
 
+    if (this.$route.query.plain) {
+        this.forScriptEditor = true;
+    }
+
         // If this page is loaded with an anchor URL, attempt to scroll to
         // it right after the page is loaded
         this.checkHash();