feat(gsoc'24): Quick button and Timing Diagram mobile component implemented

src/components/Extra.vue

@@ -1,4 +1,6 @@
 <template>
+    <QuickButtonMobile v-if="simulatorMobileStore.showMobileView" />
+    <TimingDiagramMobile v-if="simulatorMobileStore.showMobileView" v-show="simulatorMobileStore.showTimingDiagram" />
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- TabsBar -->
     <TabsBar />
@@ -34,7 +36,7 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Timing Diagram Panel -->
-    <TimingDiagramPanel />
+    <TimingDiagramPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -173,10 +175,14 @@ import ReportIssue from './ReportIssue/ReportIssue.vue'
 import TestBenchPanel from './Panels/TestBenchPanel/TestBenchPanel.vue'
 import TestBenchCreator from './Panels/TestBenchPanel/TestBenchCreator.vue'
 import TestBenchValidator from './Panels/TestBenchPanel/TestBenchValidator.vue'
+import QuickButtonMobile from './Navbar/QuickButton/QuickButtonMobile.vue'
+import TimingDiagramMobile from './Panels/TimingDiagramPanel/TimingDiagramMobile.vue'
 import { useLayoutStore } from '#/store/layoutStore'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 import { onMounted, ref } from 'vue'
 
 const layoutStore = useLayoutStore()
+const simulatorMobileStore = useSimulatorMobileStore()
 
 const layoutElementPanelRef = ref<HTMLElement | null>(null);
 

src/components/Navbar/Navbar.vue

@@ -15,13 +15,14 @@
             <User :user-data="userDropdownItems" />
         </div>
     </nav>
-    <QuickButton />
+    <QuickButton v-if="!simulatorMobileStore.showMobileView" />
 </template>
 
 <script lang="ts" setup>
 import QuickButton from '@/Navbar/QuickButton/QuickButton.vue'
 import User from '@/Navbar/User/User.vue'
 import NavbarLinks from '@/Navbar/NavbarLinks/NavbarLinks.vue'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 
 import navbarData from '#/assets/constants/Navbar/NAVBAR_DATA.json'
 import userDropdownItems from '#/assets/constants/Navbar/USER_DATA.json'
@@ -35,6 +36,7 @@ const navbarLogo = ref('logo')
 const minWidthToShowSidebar = ref(992)
 const showSidebar = ref(false)
 const projectStore = useProjectStore()
+const simulatorMobileStore = useSimulatorMobileStore()
 showSidebar.value =
     window.innerWidth < minWidthToShowSidebar.value ? true : false
 onMounted(() => {

src/components/Navbar/QuickButton/QuickButtonMobile.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="quick-btn-mobile" @ondragover="dragover">
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-save-online"
+              title="Save Online"
+              @click="saveOnline"
+          ></button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-save"
+              title="Save Offline"
+              @click="saveOffline"
+          ></button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-delete"
+              title="Delete Selected"
+              @click="deleteSelectedItem"
+          ></button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-download"
+              title="Download as Image"
+              @click="createSaveAsImgPrompt"
+          ></button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-zoom-fit"
+              title="Fit to Screen"
+              @click="zoomToFit"
+          ></button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-undo"
+              title="Undo"
+              @click="undoit"
+          ></button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-redo"
+              title="Redo"
+              @click="redoit"
+          ></button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-view"
+              title="Preview Circuit"
+              @click="view"
+          >
+          <i :style="{ color: '#ddd', transform: simulatorMobileStore.showMobileView ? 'scale(1)' : 'scale(1.25)' }" class="fas fa-expand-arrows-alt"></i>
+          </button>
+      </div>
+      <div class="btn-container">
+          <button
+              type="button"
+              class="quick-btn-timing"
+              @mousedown="simulatorMobileStore.showTimingDiagram = !simulatorMobileStore.showTimingDiagram"
+          >
+          <i :style="{ transform: simulatorMobileStore.showMobileView ? 'scale(1)' : 'scale(1.25)' }" class="fa-solid fa-timeline"></i>
+          </button>
+    </div>
+      <div class="zoom-slider">
+          <button class="zoom-slider-decrement" @click="decrement">-</button>
+          <input
+              id="customRange1"
+              type="range"
+              class="custom-range"
+              min="0"
+              max="45"
+              step="1"
+          />
+          <span id="slider_value"></span>
+          <button class="zoom-slider-increment" @click="increment">+</button>
+      </div>
+  </div>
+  <div id="exitView"></div>
+</template>
+
+<script lang="ts" setup>
+import DragSvgDots from './DragSvgDots/DragSvgDots.vue'
+import { deleteSelected } from '#/simulator/src/ux'
+import undo from '#/simulator/src/data/undo'
+import redo from '#/simulator/src/data/redo'
+import { fullView } from '#/simulator/src/ux'
+import { ZoomIn, ZoomOut } from '#/simulator/src/listeners'
+import logixFunction from '#/simulator/src/data'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
+
+const simulatorMobileStore = useSimulatorMobileStore()
+
+function dragover(): void {
+  const quickBtn: HTMLElement | null = document.querySelector('.quick-btn')
+  if (quickBtn) {
+      quickBtn.style.boxShadow = 'none'
+      quickBtn.style.background = 'var(--bg-navbar)'
+  }
+}
+
+function saveOnline(): void {
+  logixFunction.save()
+}
+function saveOffline(): void {
+  logixFunction.saveOffline()
+}
+function deleteSelectedItem(): void {
+  deleteSelected()
+}
+function createSaveAsImgPrompt(): void {
+  logixFunction.createSaveAsImgPrompt()
+}
+function zoomToFit(): void {
+  globalScope.centerFocus(false)
+}
+function undoit(): void {
+  undo()
+}
+function redoit(): void {
+  redo()
+}
+function view(): void {
+  fullView()
+}
+function decrement(): void {
+  ZoomOut()
+}
+function increment(): void {
+  ZoomIn()
+}
+</script>
+
+<style scoped>
+/* @import url('./QuickButton.css'); */
+
+.panel-drag {
+  cursor: move;
+  opacity: 0.6;
+  /* display: grid;
+grid-template-columns: 1fr 1fr;
+grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+padding: 6px 0;
+width: 1px; */
+}
+.quick-btn-mobile {
+  background: var(--bg-navbar);
+  border-top: 1.5px solid var(--qp-br-tl);
+  border-left: 1.5px solid var(--qp-br-tl);
+  border-right: 1.5px solid var(--qp-br-rd);
+  border-bottom: 1.5px solid var(--qp-br-rd);
+}
+
+.quick-btn-mobile {
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  justify-content: space-evenly;
+}
+
+.quick-btn-mobile > div > button {
+  border: none;
+}
+
+.btn-container {
+  padding: 0.75rem 0;
+}
+
+.drag-dot-svg {
+  width: 12px;
+  height: 20px;
+  background: url(../../../styles/css/assets/shorcuts/dragDots.svg)
+      center/contain;
+  display: block;
+  margin-left: 4px;
+}
+
+.quick-btn-save-online {
+  background: url(../../../styles/css/assets/shorcuts/save-online.svg)
+      center/cover;
+  width: 26.79px;
+  height: 19px;
+  display: block;
+}
+
+.quick-btn-save {
+  background: url(../../../styles/css/assets/shorcuts/save.svg) center/cover;
+  width: 19px;
+  height: 19px;
+  display: block;
+}
+
+.quick-btn-delete {
+  background: url(../../../styles/css/assets/shorcuts/delete.svg) center/cover;
+  width: 25px;
+  height: 19px;
+  display: block;
+}
+
+.quick-btn-download {
+  background: url(../../../styles/css/assets/shorcuts/download.svg)
+      center/cover;
+  width: 19px;
+  height: 19px;
+  display: block;
+}
+
+.quick-btn-zoom-fit {
+  background: url(../../../styles/css/assets/shorcuts/fit.svg) center/cover;
+  width: 19px;
+  height: 19px;
+  display: block;
+}
+
+.quick-btn-undo {
+  background: url(../../../styles/css/assets/shorcuts/undo.svg) center/cover;
+  width: 19px;
+  height: 20.25px;
+  display: block;
+}
+
+.quick-btn-redo {
+  background: url(../../../styles/css/assets/shorcuts/redo.svg) center/cover;
+  width: 19px;
+  height: 20.25px;
+  display: block;
+}
+
+.quick-btn-view, .quick-btn-timing {
+  color: white;
+}
+
+.zoom-slider {
+  color: white;
+  font-size: 20px;
+  padding-top: 0.2rem;
+}
+
+.zoom-slider-decrement {
+  position: relative;
+  padding-right: 4px;
+  bottom: 0.3rem;
+}
+.zoom-slider-increment {
+  position: relative;
+  padding-left: 4px;
+  bottom: 0.3rem;
+}
+
+.custom-range {
+  width: 80px !important;
+}
+.custom-range::-moz-range-track {
+  height: 1px;
+}
+
+.custom-range::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  background-color: white;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.custom-range:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(75, 86, 99, 0.25);
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  height: 1px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 10px;
+  height: 10px;
+  background-color: white;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+@media (max-width: 738px) {
+  .quick-btn-save-online {
+    width: 21.43px;
+    height: 15.2px;
+  }
+
+  .quick-btn-save {
+    width: 15.2px;
+    height: 15.2px;
+  }
+
+  .quick-btn-delete {
+    width: 20px;
+    height: 15.2px;
+  }
+
+  .quick-btn-download {
+    width: 15.2px;
+    height: 15.2px;
+  }
+
+  .quick-btn-zoom-fit {
+    width: 15.2px;
+    height: 15.2px;
+  }
+
+  .quick-btn-undo {
+    width: 15.2px;
+    height: 16.2px;
+  }
+
+  .quick-btn-redo {
+    width: 15.2px;
+    height: 16.2px;
+  }
+}
+</style>