add panel buttons for mobile, some ui adjustments

Author: spencerwahl

packages/ramp-core/src/api/instance.ts

@@ -69,7 +69,9 @@ export class InstanceAPI {
         }
 
         // default missing options
-        if (!options) { options = {}; }
+        if (!options) {
+            options = {};
+        }
 
         // use strict check against false, as missing properties have default value of true.
         // run the default setup functions unless flags have been set to false.
@@ -79,7 +81,6 @@ export class InstanceAPI {
         if (!(options.loadDefaultEvents === false)) {
             this.event.addDefaultEvents();
         }
-
     }
 
     // TODO: we probably need to expose other Vue global functions here like `set`, `use`, etc.

packages/ramp-core/src/components/map/map-caption.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="absolute bottom-0 flex justify-center pointer-events-none text-white bg-black-75 left-64 right-0 py-2">
+    <div
+        class="map-caption absolute bottom-0 flex justify-center pointer-events-none text-gray-400 bg-black-75 left-32 sm:left-64 right-0 py-2"
+    >
         <span class="relative ml-10 truncate top-1">Attribution goes here</span>
 
         <span class="flex-grow w-15"></span>
@@ -12,7 +14,7 @@
         </span>
 
         <button
-            class="flex-shrink-0 mx-10 pointer-events-auto h-20 cursor-pointer border-none"
+            class="flex-shrink-0 mx-10 px-4 pointer-events-auto h-20 cursor-pointer border-none"
             @click="onScaleClick"
             :aria-pressed="isImperialScale"
             :aria-label="$t('map.toggleScaleUnits')"
@@ -176,4 +178,8 @@ export default class MapCaptionV extends Vue {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.map-caption {
+    backdrop-filter: blur(5px);
+}
+</style>

packages/ramp-core/src/components/panel-stack/panel-screen.vue

@@ -5,6 +5,7 @@
             class="flex flex-shrink-0 items-center border-b border-solid border-gray-600 px-8 h-48 default-focus-style"
             v-focus-item
         >
+            <back v-if="$iApi.screenSize === 'xs'" @click="panel.close()"></back>
             <h2 class="flex-grow text-lg py-16 pl-8"><slot name="header"></slot></h2>
 
             <slot name="controls"></slot>
@@ -19,6 +20,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { Get, Sync, Call } from 'vuex-pathify';
+import { PanelInstance } from '@/api';
 
 @Component
 export default class PanelScreenV extends Vue {
@@ -31,6 +33,8 @@ export default class PanelScreenV extends Vue {
      * A prop indicating if the `content` slot should be rendered.
      */
     @Prop({ default: true }) content!: boolean;
+
+    @Prop() panel!: PanelInstance;
 }
 </script>
 

packages/ramp-core/src/fixtures/appbar/appbar.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="absolute top-0 left-0 flex flex-col items-stretch bg-black-75 h-full w-40 sm:w-64 pointer-events-auto" v-focus-list>
+    <div class="appbar absolute top-0 left-0 flex flex-col items-stretch bg-black-75 h-full w-40 sm:w-64 pointer-events-auto" v-focus-list>
         <component
             v-for="(item, index) in items"
             :is="item.componentId"
             :key="`${item}-${index}`"
-            class="h-24 my-4 first:mt-8 text-gray-400 hover:text-white"
+            class="h-24 my-4 first:mt-8 text-gray-400 hover:text-white focus:outline-none"
             :class="{ 'py-12': item.id !== 'divider' }"
             :focus-item="item.id !== 'divider'"
             :options="item.options"
@@ -30,4 +30,12 @@ export default class AppbarV extends Vue {
 .focused {
     @apply bg-blue-900 text-white;
 }
+
+.appbar {
+    backdrop-filter: blur(5px);
+
+    > button {
+        outline: none;
+    }
+}
 </style>

packages/ramp-core/src/fixtures/basemap/basemap.vue

@@ -1,12 +1,12 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header>
             {{ $t('basemap.title') }}
         </template>
 
         <template #controls>
-            <pin @click="panel.pin()" :active="isPinned"></pin>
-            <close @click="panel.close()"></close>
+            <pin @click="panel.pin()" :active="isPinned" v-if="!$iApi.screenSize !== 'xs'"></pin>
+            <close @click="panel.close()" v-if="$iApi.screenSize !== 'xs'"></close>
         </template>
 
         <template #content>
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import { Get, Sync, Call } from 'vuex-pathify';
 import { PanelInstance } from '@/api';
 

packages/ramp-core/src/fixtures/details/details-result.vue

@@ -1,5 +1,5 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header>
             Details
         </template>

packages/ramp-core/src/fixtures/gazebo/p1-screen-1.vue

@@ -1,5 +1,5 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header>
             Gazebo/Panel 1/Screen A
         </template>
@@ -12,7 +12,7 @@
                     <a href="#">Option 2</a>
                     <a href="#">Option 3</a>
                 </panel-options-menu>
-                <pin :active="pinned && pinned.id === 'p1'" @click="pinPanel"></pin>
+                <pin :active="pinned && pinned.id === 'p1'" @click="pinPanel" v-if="$iApi.screenSize !== 'xs'"></pin>
             </div>
         </template>
 

packages/ramp-core/src/fixtures/gazebo/p1-screen-2.vue

@@ -1,12 +1,12 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header>
             Gazebo/Panel 1/Screen B
         </template>
 
         <template #controls>
             <!-- this is fine, but the name of the panel is hardcoded there, so you wouldn't need to update it if it ever changes -->
-            <pin :active="pinned === 'p1'" @click="pinPanel"></pin>
+            <pin :active="pinned === 'p1'" @click="pinPanel" v-if="$iApi.screenSize !== 'xs'"></pin>
         </template>
 
         <template #content>

packages/ramp-core/src/fixtures/gazebo/p2-screen-1.vue

@@ -1,5 +1,5 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header>
             Gazebo/Panel 2/Screen A
         </template>
@@ -8,7 +8,7 @@
             <!-- <pin> is a global button component that any fixture/panel/screen can reuse -->
 
             <!-- ✔ this is the correct way to pin a panel and bind the button active state whether this panel is pinned or not 👇 -->
-            <pin @click="panel.pin(!isPinned)" :active="isPinned"></pin>
+            <pin @click="panel.pin(!isPinned)" :active="isPinned" v-if="$iApi.screenSize !== 'xs'"></pin>
 
             <!-- ✔ this will also work 👇 -->
             <!-- <pin @click="panel.pin(!panel.isPinned)" :active="panel.isPinned"></pin> -->

packages/ramp-core/src/fixtures/gazebo/p2-screen-2.vue

@@ -1,5 +1,5 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header>
             Gazebo/Panel 2/Screen B
         </template>
@@ -8,7 +8,7 @@
             <!-- <pin> is a global button component that any fixture/panel/screen can reuse -->
 
             <!-- ✔ this is the correct way to pin a panel and bind the button active state whether this panel is pinned or not 👇 -->
-            <pin @click="panel.pin()" :active="isPinned"></pin>
+            <pin @click="panel.pin()" :active="isPinned" v-if="$iApi.screenSize !== 'xs'"></pin>
 
             <!-- ✔ this will also work 👇 -->
             <!-- <pin @click="panel.pin()" :active="panel.isPinned"></pin> -->
@@ -62,7 +62,7 @@ export default class P2Screen2V extends Vue {
 
     enhancedCatActivities() {
         // shows a cat, also does an event API flex
-        this.panel.show('p-2-screen-3')
+        this.panel.show('p-2-screen-3');
         this.$iApi.event.emit('gazebo/beholdMyText', 'I am a cat');
     }
 }

packages/ramp-core/src/fixtures/gazebo/p2-screen-3.vue

@@ -1,16 +1,16 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header> Gazebo/Panel 2/Screen C </template>
 
         <template #controls>
             <!-- <pin> is a global button component that any fixture/panel/screen can reuse -->
 
             <!-- ✔ this is the correct way to pin a panel and bind the button active state whether this panel is pinned or not 👇 -->
-            <pin @click="panel.pin()" :active="panel.isPinned"></pin>
+            <pin @click="panel.pin()" :active="panel.isPinned" v-if="$iApi.screenSize !== 'xs'"></pin>
 
             <!-- ✔ this will also work 👇 -->
             <!-- <pin @click="panel.pin()" :active="panel.isPinned"></pin> -->
-            <close @click="panel.close()"></close>
+            <close @click="panel.close()" v-if="$iApi.screenSize !== 'xs'"></close>
         </template>
 
         <template #content>

packages/ramp-core/tailwind.config.js

@@ -18,7 +18,8 @@ module.exports = {
         extend: {
             colors: {
                 'black-75': 'rgba(0, 0, 0, 0.75)',
-                'white-75': 'rgba(255, 255, 255, 0.75)'
+                'white-75': 'rgba(255, 255, 255, 0.75)',
+                'grey-test': 'rgba(150,150,150,0.7);'
             },
             boxShadow: {
                 tm: '0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px 0 rgba(0, 0, 0, 0.1)'

packages/ramp-sample-fixtures/src/diligord/diligord-fixture.js

@@ -55,24 +55,29 @@
             };
         },
         render: function(h) {
-            return h('panel-screen', [
+            // using built-in `pin` panel header control; can use either `this.isPinned` getter method or the `this.panel.isPinned` panel getter
+            const pin =
+                this.$iApi.screenSize === 'xs'
+                    ? undefined
+                    : h('pin', { props: { active: this.isPinned }, on: { click: () => this.panel.pin(!this.panel.isPinned) } });
+
+            const close =
+                this.$iApi.screenSize === 'xs'
+                    ? undefined
+                    : h('close', {
+                          on: {
+                              click: () => this.panel.close() // this works ✔
+                              // click: this.closeMethod, // this also works ✔
+                              // click: this.panel.close // this doesn't work ❌
+                          }
+                      });
+
+            return h('panel-screen', { props: { panel: this.panel } }, [
                 // pass a `span` to the `header` slot of the panel-screen
                 h('template', { slot: 'header' }, [h('span', this.title)]),
 
                 // pass `pin` and `close` controls `controls` slot of the panel-screen
-                h('template', { slot: 'controls' }, [
-                    // using built-in `pin` panel header control; can use either `this.isPinned` getter method or the `this.panel.isPinned` panel getter
-                    h('pin', { props: { active: this.isPinned }, on: { click: () => this.panel.pin(!this.panel.isPinned) } }),
-
-                    // using built-in `close` panel header control
-                    h('close', {
-                        on: {
-                            click: () => this.panel.close() // this works ✔
-                            // click: this.closeMethod, // this also works ✔
-                            // click: this.panel.close // this doesn't work ❌
-                        }
-                    })
-                ]),
+                h('template', { slot: 'controls' }, [pin, close]),
 
                 // pass screen content to the `header` slot of the panel-screen
                 h('template', { slot: 'content' }, [
@@ -168,7 +173,7 @@
 
         // TEMP CODE FOR SAMPLE
         // will allow an outside caller to update the fixture
-        doAThing (text) {
+        doAThing(text) {
             // too dumb do figure out how to get text on the fixture panels. vue hates me.
             console.log('EVENTS API SAMPLE: dillygord got this data from gazebo', text);
         }

packages/ramp-sample-fixtures/src/mouruge/screen.vue

@@ -1,11 +1,11 @@
 <template>
-    <panel-screen>
+    <panel-screen :panel="panel">
         <template #header>
             Mouruge Fixture
         </template>
 
         <template #controls>
-            <close @click="panel.close()"></close>
+            <close @click="panel.close()" v-if="$iApi.screenSize !== 'xs'"></close>
         </template>
 
         <template #content>