feat: tabsbar component #14

devartstar · 2022-07-24T21:26:37Z

fixes: #12

Progress made -

Creating tabsbar component.
Replace DOM manupulation using string with Vue logic
Fixing the change in circuitName in Properties Panel on switching between tabs.
Sorting of tabs by dragging. (using Vue-SortableJS)
CSS Refactoring.

commit-lint · 2022-07-24T21:26:40Z

Features

created tabsbar component (c953e2b)
circuitList in store and updating value in external js (a752e5c)
replace tab rendering as string to dom with vue-for (95d7c7a)
removing item from tabList on closing tab (095ff02)
add sortability of tabs (31b7614)
added message modal (1d5debe)
add dialog boxes for messages instead of prompt (94863d1)
persistent dialog box for dependencies (2c0a4e0)
moved circuit deleting cheching to vue component (7c9c3bf)
made message Box reusable (58566b4)
linked dialog box conformation for delete to logic (a97a267)
create circuit prompt to dialog box (ca7fa86)
completed converting all prompts of tabsbar to dialog box (4ab5090)

Bug Fixes

new circuit was not working after sorting tabs (05e2ada)
multiple tabs closing (4bce317)
propper current-tab display on sorting, switching, creating, deleting (225de3d)
lined circuitName in tabsbar and properties panel (dae55e7)
lined-updated properties panel with switching tabs (6950d9e)
displaying circuit name from scopeList (5efa081)
acessing only states instead of complete pinia store in Tabsbar (cb77ce0)
initially no circuit name should be visible but default set to untitled-circuit (8cda493)
default values for array and object in props (5ac9faf)
replaces x with icon cross (0d9eba5)
all tabs circuits deleting from properties panel (7ed700b)

Code Refactoring

circuit-list store only list of ids(more generalized) as name can be changed (d7b718c)

Reverts

on changing tabs only circuitname changes (9dee575)

Contributors

devartstar

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR:

@Commit-Lint merge patch will merge dependabot PR on "patch" versions (X.X.Y - Y change)
@Commit-Lint merge minor will merge dependabot PR on "minor" versions (X.Y.Y - Y change)
@Commit-Lint merge major will merge dependabot PR on "major" versions (Y.Y.Y - Y change)
@Commit-Lint merge disable will desactivate merge dependabot PR
@Commit-Lint review will approve dependabot PR
@Commit-Lint stop review will stop approve dependabot PR

netlify · 2022-07-24T21:26:55Z

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	`7ed700b`
🔍 Latest deploy log	https://app.netlify.com/sites/circuitverse/deploys/63039cf4d5eed80008387e9a
😎 Deploy Preview	https://deploy-preview-14--circuitverse.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…eting

…me can be changed

devartstar · 2022-08-02T07:17:33Z

I have linked the tabs-bar circuitName with the properties-panel circuitName
@abstrekt @ayan-biswas0412 can you please review this PR

abstrekt · 2022-08-07T14:58:17Z

I'm able to delete all circuits from the properties panel, and then not able to add any any circuit.

abstrekt · 2022-08-07T15:00:45Z

can you also compare the nav and tabs bar with the production version? some CSS differences can be observed ..

abstrekt · 2022-08-07T15:03:36Z

When we select a tab from the tabs bar the tabs name field is focused and text selected in the properties tab, but this is not happening with the last tab.

Works fine with other tabs

lets also have this anytime we click the tab.

abstrekt · 2022-08-07T15:05:18Z

Low hanger: When we select the create button , the input text resets to "Untitled-Circuit" before closing, this shouldn't be visible in the UI.

abstrekt · 2022-08-07T15:08:09Z

When we click + to create a new sub-circuit, lets focus and select the default text "Untitled-Circuit" just like in production, as most of the time user will try to change this, so it is a good UX.

src/components/MessageBox/messageBox.vue

abstrekt · 2022-08-07T15:15:02Z

src/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue

@@ -30,7 +30,8 @@ import HelpButton from '#/components/Panels/Shared/HelpButton.vue'
 import ElementProperty from '#/components/Panels/PropertiesPanel/ModuleProperty/ElementProperty/ElementProperty.vue'
 import ProjectProperty from '#/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue'
 import SubcircuitPropert from '#/components/Panels/PropertiesPanel/ModuleProperty/SubcircuitProperty/SubcircuitProperty.vue'
-import { toRefs } from '@vue/reactivity'
+import { ref, toRefs } from '@vue/reactivity'
+import { onMounted } from '@vue/runtime-core'


I guess we can directly import from "vue"

abstrekt · 2022-08-07T15:16:41Z

src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue

+
+onMounted(() => {
+    // checking if circuit or tab is switched
+    setInterval(() => {


we'd need a better way to do this, setInterval won't be a good option here,

will create an issue for it to be looked at afterward.

src/components/TabsBar/TabsBar.vue

abstrekt · 2022-08-07T15:21:01Z

src/components/TabsBar/TabsBar.vue

+        <button @click="createNewCircuit()">&#43;</button>
+    </div>
+    <MessageBox
+        v-model="SimulatorState.dialogBox.create_circuit"


I'm not able to find the MessageBox component accepting v-model, can you add some context here?

src/components/TabsBar/TabsBar.vue

…ntitled-circuit

devartstar added 3 commits July 24, 2022 17:27

feat: created tabsbar component

c953e2b

feat: circuitList in store and updating value in external js

a752e5c

feat: replace tab rendering as string to dom with vue-for

95d7c7a

devartstar added 18 commits July 25, 2022 04:12

feat: removing item from tabList on closing tab

095ff02

feat: add sortability of tabs

31b7614

fix: new circuit was not working after sorting tabs

05e2ada

fix: multiple tabs closing

4bce317

feat: added message modal

1d5debe

feat: add dialog boxes for messages instead of prompt

94863d1

feat: persistent dialog box for dependencies

2c0a4e0

feat: moved circuit deleting cheching to vue component

7c9c3bf

feat: made message Box reusable

58566b4

feat: linked dialog box conformation for delete to logic

a97a267

feat: create circuit prompt to dialog box

ca7fa86

feat: completed converting all prompts of tabsbar to dialog box

4ab5090

fix: propper current-tab display on sorting, switching, creating, del…

225de3d

…eting

fix: lined circuitName in tabsbar and properties panel

dae55e7

fix: lined-updated properties panel with switching tabs

6950d9e

fix: displaying circuit name from scopeList

5efa081

refactor: circuit-list store only list of ids(more generalized) as na…

d7b718c

…me can be changed

revert: on changing tabs only circuitname changes

9dee575

devartstar requested review from abstrekt and ayan-biswas0412 August 2, 2022 07:17

fix: acessing only states instead of complete pinia store in Tabsbar

cb77ce0

abstrekt reviewed Aug 7, 2022

View reviewed changes

src/components/MessageBox/messageBox.vue Outdated Show resolved Hide resolved

abstrekt reviewed Aug 7, 2022

View reviewed changes

src/components/TabsBar/TabsBar.vue Outdated Show resolved Hide resolved

abstrekt reviewed Aug 7, 2022

View reviewed changes

src/components/TabsBar/TabsBar.vue Show resolved Hide resolved

devartstar added 4 commits August 22, 2022 20:00

fix: initially no circuit name should be visible but default set to u…

8cda493

…ntitled-circuit

fix: default values for array and object in props

5ac9faf

fix: replaces x with icon cross

0d9eba5

fix: all tabs circuits deleting from properties panel

7ed700b

devartstar changed the title ~~feat(wip): tabsbar component~~ feat: tabsbar component Aug 22, 2022

devartstar enabled auto-merge (squash) January 2, 2023 22:08

vedant-jain03 approved these changes Jan 3, 2023

View reviewed changes

abstrekt approved these changes Jan 3, 2023

View reviewed changes

devartstar merged commit 25a160f into CircuitVerse:main Jan 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: tabsbar component #14

feat: tabsbar component #14

Uh oh!

devartstar commented Jul 24, 2022 •

edited

Loading

Uh oh!

commit-lint bot commented Jul 24, 2022 •

edited

Loading

Uh oh!

netlify bot commented Jul 24, 2022 •

edited

Loading

Uh oh!

devartstar commented Aug 2, 2022

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

abstrekt commented Aug 7, 2022 •

edited

Loading

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

Uh oh!

abstrekt Aug 7, 2022

Uh oh!

abstrekt Aug 7, 2022

Uh oh!

devartstar Aug 22, 2022

Uh oh!

Uh oh!

abstrekt Aug 7, 2022

Uh oh!

Uh oh!

Uh oh!

feat: tabsbar component #14

feat: tabsbar component #14

Uh oh!

Conversation

devartstar commented Jul 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

commit-lint bot commented Jul 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Features

Bug Fixes

Code Refactoring

Reverts

Contributors

Uh oh!

netlify bot commented Jul 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for circuitverse ready!

Uh oh!

devartstar commented Aug 2, 2022

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

abstrekt commented Aug 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

abstrekt commented Aug 7, 2022

Uh oh!

Uh oh!

abstrekt Aug 7, 2022

Choose a reason for hiding this comment

Uh oh!

abstrekt Aug 7, 2022

Choose a reason for hiding this comment

Uh oh!

devartstar Aug 22, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

abstrekt Aug 7, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

devartstar commented Jul 24, 2022 •

edited

Loading

commit-lint bot commented Jul 24, 2022 •

edited

Loading

netlify bot commented Jul 24, 2022 •

edited

Loading

abstrekt commented Aug 7, 2022 •

edited

Loading