ULT-1 better fullscreen dialogs

DanielTerletzkiy · Feb 28, 2023 · 884a798 · 884a798
1 parent 51f8529
commit 884a798
Show file tree

Hide file tree

Showing 13 changed files with 182 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ultira",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": true,
   "description": "ultimate jira tool",
   "author": {
@@ -107,7 +107,7 @@
     "vite-plugin-electron-renderer": "^0.12.1",
     "vue": "^3.2.37",
     "vue-ellipse-progress": "^2.1.1",
-    "vue3-carousel": "^0.2.11",
+    "vue3-carousel": "^0.1.46",
     "vuelize": "^0.1.55",
     "vuex": "^4.0.2",
     "vuex-persist": "^3.1.3"

diff --git a/src/components/JiraBranchView.vue b/src/components/JiraBranchView.vue
@@ -1,5 +1,6 @@
 <template>
-  <JiraViewWrapper hide-divider>
+  <JiraViewWrapper hide-divider :canHide="canHide"
+                   @long="() => currentDialogComponent = JiraBranchView">
     <template v-slot:icon>
       <d-icon
         name="layer-group"
@@ -21,7 +22,7 @@
           :key="option"
           height="40px"
           style="font-size: 1.2rem"
-          >{{ option }}
+        >{{ option }}
         </d-list-item>
       </d-tab-list>
       <JiraProjectBranchRefreshButton />
@@ -58,7 +59,7 @@
                   {{ repository.name }}
                 </d-card-title>
                 <d-card-subtitle
-                  >Repository
+                >Repository
                   <JiraLinkIconButton
                     v-if="repository.url"
                     :url="repository.url"
@@ -196,7 +197,7 @@
         <JiraProjectList />
       </d-column>
       <d-row v-else block justify="center">
-        <JiraLoader/>
+        <JiraLoader />
       </d-row>
     </d-card>
   </JiraViewWrapper>
@@ -208,14 +209,19 @@ import JiraViewWrapper from "./JiraViewWrapper.vue";
 import JiraMarkup from "./JiraMarkup.vue";
 import JiraProjectButton from "./JiraProjectButton.vue";
 import JiraProjectList from "./JiraProjectList.vue";
-import { currentIssue } from "../store/jira.store";
+import { currentDialogComponent, currentIssue } from "../store/jira.store";
 import JiraLoader from "./JiraLoader.vue";
 import JiraProjectBranchRefreshButton from "./JiraProjectBranchRefreshButton.vue";
 import { ref } from "vue";
 import JiraLinkIconButton from "./JiraLinkIconButton.vue";
 import JiraPRButton from "./JiraPRButton.vue";
 import { ChangeType } from "../../types/ChangeType";
 import { ViewSwitch } from "../../types/ViewSwitch";
+import JiraBranchView from "./JiraBranchView.vue";
+
+defineProps({
+  canHide: { type: Boolean }
+});
 
 function changeTypeColor(type: ChangeType) {
   switch (type) {

diff --git a/src/components/JiraCommentsView.vue b/src/components/JiraCommentsView.vue
@@ -1,14 +1,16 @@
 <template>
-  <JiraViewWrapper class="jira-comments">
+  <JiraViewWrapper class="jira-comments" :canHide="canHide"
+                   @long="() => currentDialogComponent = JiraCommentsView">
     <template v-slot:icon="{hidden}">
-      <d-badge :value="hidden && currentIssue?.task.fields.comment?.comments.length > 0" color="primary" background-color="primary">
+      <d-badge :value="hidden && currentIssue?.task.fields.comment?.comments.length > 0" color="primary"
+               background-color="primary">
         <d-icon
           name="comment-message"
           :size="30"
           icon-style="monochrome"
           color="primary"
         />
-        <template v-slot:content>{{currentIssue?.task.fields.comment?.comments.length}}</template>
+        <template v-slot:content>{{ currentIssue?.task.fields.comment?.comments.length }}</template>
       </d-badge>
     </template>
     <template v-slot:title> Comments</template>
@@ -73,7 +75,12 @@ import { inject, ref } from "vue";
 import JiraCommentsViewItem from "./JiraCommentsViewItem.vue";
 import JiraViewWrapper from "./JiraViewWrapper.vue";
 import JiraLoader from "./JiraLoader.vue";
-import { currentIssue } from "../store/jira.store";
+import { currentDialogComponent, currentIssue } from "../store/jira.store";
+import JiraCommentsView from "./JiraCommentsView.vue";
+
+defineProps({
+  canHide: { type: Boolean }
+});
 
 // eslint-disable-next-line no-undef,no-unused-vars
 const vuelize: Vuelize = inject("vuelize") as Vuelize;

diff --git a/src/components/JiraInfoView.vue b/src/components/JiraInfoView.vue
@@ -1,50 +1,53 @@
 <template>
-  <d-card class="jira-info" block>
-    <d-column no-padding gap block :wrap="false">
-      <d-row class="px-1" gap :wrap="false">
-        <d-tooltip position="right" filled color="primary">
-          <JiraImage
-            :url="currentIssue?.task.fields.project.avatarUrls['48x48']"
-            :key="currentIssue?.task.fields.project.key"
-          >
-            <template v-slot:default="{ base64 }">
-              <d-card width="64px" height="64px" elevation-light>
-                <d-avatar
-                  v-if="base64"
-                  key="image"
-                  color="transparent"
-                  size="64"
-                  :style="{
+  <JiraViewWrapper class="jira-info" headerHeight="80px" hideDivider
+                   @long="() => currentDialogComponent = JiraInfoView">
+    <template v-slot:button>
+      <d-tooltip class="ma-2 mr-0" position="right" filled color="primary">
+        <JiraImage
+          :url="currentIssue?.task.fields.project.avatarUrls['48x48']"
+          :key="currentIssue?.task.fields.project.key"
+        >
+          <template v-slot:default="{ base64 }">
+            <d-card width="64px" height="64px" elevation-light v-ripple>
+              <d-avatar
+                v-if="base64"
+                key="image"
+                color="transparent"
+                size="64"
+                :style="{
                       backgroundImage: `url(${base64})`,
                       backgroundPosition: 'center',
                       backgroundSize: 'cover',
                     }"
-                >
-                  <div />
-                </d-avatar>
-                <d-elevation-loader
-                  v-else
-                  key="loader"
-                  :default-size="16"
-                  :amount="16"
-                  :columns="4"
-                />
-              </d-card>
-            </template>
-          </JiraImage>
-          <template v-slot:tooltip>
-            <d-column>
-              <d-card-subtitle class="pa-0" color="inherit">
-                <d-icon name="transaction" :size="20" />
-                {{ currentIssue.task.fields.project.name }}
-              </d-card-subtitle>
-              <d-card-subtitle class="pa-0" color="inherit">
-                <d-icon name="key-skeleton" :size="20" />
-                {{ currentIssue.task.fields.project.key }}
-              </d-card-subtitle>
-            </d-column>
+              >
+                <div />
+              </d-avatar>
+              <d-elevation-loader
+                v-else
+                key="loader"
+                :default-size="16"
+                :amount="16"
+                :columns="4"
+              />
+            </d-card>
           </template>
-        </d-tooltip>
+        </JiraImage>
+        <template v-slot:tooltip>
+          <d-column>
+            <d-card-subtitle class="pa-0" color="inherit">
+              <d-icon name="transaction" :size="20" />
+              {{ currentIssue.task.fields.project.name }}
+            </d-card-subtitle>
+            <d-card-subtitle class="pa-0" color="inherit">
+              <d-icon name="key-skeleton" :size="20" />
+              {{ currentIssue.task.fields.project.key }}
+            </d-card-subtitle>
+          </d-column>
+        </template>
+      </d-tooltip>
+    </template>
+    <template v-slot:title>
+      <d-row gap :wrap="false">
         <d-column block>
           <d-card-title class="pt-0 font-size-medium" style="text-align: start">
             {{ currentIssue.task.fields.summary }}
@@ -85,6 +88,13 @@
           </d-card-subtitle>
         </d-column>
       </d-row>
+    </template>
+    <d-column
+      gap no-padding
+      style="max-height: 100%; overflow: overlay"
+      height="100%"
+      :wrap="false"
+    >
       <d-row class="info-row" gap block :wrap="false" align="start">
         <d-column class="description-column" :wrap="false" no-padding block height="100%">
           <d-column
@@ -93,12 +103,6 @@
             block
             no-padding
           >
-            <d-row>
-              <d-card-subtitle class="pa-0 font-weight-bold">
-                Description
-              </d-card-subtitle>
-              <d-divider class="mx-3" block elevation="6" />
-            </d-row>
             <JiraMarkup :body="currentIssue.task.fields.description" />
           </d-column>
           <d-spacer />
@@ -113,10 +117,10 @@
           </d-button>
           <JiraAttachmentDialog v-model="attachmentDialog" />
         </d-column>
-        <JiraInfoViewSidebar />
+        <JiraInfoViewSidebar class="side-bar" />
       </d-row>
     </d-column>
-  </d-card>
+  </JiraViewWrapper>
 </template>
 
 <script setup lang="ts">
@@ -127,8 +131,10 @@ import JiraInfoViewSidebar from "./JiraInfoViewSidebar.vue";
 import JiraMarkup from "./JiraMarkup.vue";
 import JiraImage from "./JiraImage.vue";
 import JiraTransitionButtons from "./JiraTransitionButtons.vue";
-import { currentIssue } from "../store/jira.store";
+import { currentDialogComponent, currentIssue } from "../store/jira.store";
 import JiraAttachmentDialog from "./JiraAttachmentDialog.vue";
+import JiraViewWrapper from "./JiraViewWrapper.vue";
+import JiraInfoView from "./JiraInfoView.vue";
 
 // eslint-disable-next-line no-undef
 const vuelize: Vuelize = inject("vuelize") as Vuelize;
@@ -162,12 +168,9 @@ function toggleAttachmentDialog() {
 
 <style lang="scss">
 .jira-info {
-  display: flex;
-  max-height: inherit;
-  overflow: hidden;
 
   .info-row {
-    max-height: calc(100% - 78px - 6px);
+    max-height: calc(100%);
 
     .description-column {
       max-height: 100%;

diff --git a/src/components/JiraInfoViewSidebar.vue b/src/components/JiraInfoViewSidebar.vue
@@ -6,10 +6,6 @@
     height="100%"
     style="min-width: 250px"
   >
-    <d-row>
-      <d-card-subtitle class="pa-0 font-weight-bold">Sidebar</d-card-subtitle>
-      <d-divider class="mx-3" block elevation="8" />
-    </d-row>
     <d-column gap class="px-2">
       <JiraUserItem :user="currentIssue.task.fields.reporter">
         Reporter

diff --git a/src/components/JiraProjectActions.vue b/src/components/JiraProjectActions.vue
@@ -4,12 +4,13 @@
       <JiraButtonConfirm :disabled="disabled" color="primary" icon="import" :size="30" @confirm="onUpdate" />
       <template v-slot:tooltip>Update from <b>{{ project.defaultBranch }}</b></template>
     </d-tooltip>
-    <d-tooltip position="left">
+    <d-tooltip position="left" :disabled="!hasIDE">
       <JiraButtonConfirm :disabled="disabled" color="primary" icon="folder-open" :size="30" @confirm="onOpen" />
-      <template v-slot:tooltip>Open</template>
+      <template v-slot:tooltip>Open <b>{{ hasIDE ? project.ide.name : "" }}</b></template>
     </d-tooltip>
     <d-tooltip position="left" :disabled="!hasDefaultBranch">
-      <JiraButtonConfirm :disabled="disabled" color="primary" icon="cloud-database-tree" :size="30" @confirm="onChangeDefault" />
+      <JiraButtonConfirm :disabled="disabled" color="primary" icon="cloud-database-tree" :size="30"
+                         @confirm="onChangeDefault" />
       <template v-slot:tooltip>Change to <b>{{ project.defaultBranch }}</b></template>
     </d-tooltip>
   </d-column>
@@ -31,7 +32,9 @@ function onUpdate() {
 }
 
 function onOpen() {
-  ProjectController.open(props.project);
+  if (hasIDE.value) {
+    ProjectController.open(props.project);
+  }
 }
 
 function onChangeDefault() {
@@ -41,6 +44,7 @@ function onChangeDefault() {
 }
 
 const hasDefaultBranch = computed(() => !!props.project.defaultBranch);
+const hasIDE = computed(() => !!props.project?.ideId);
 
 </script>
 

diff --git a/src/components/JiraProjectList.vue b/src/components/JiraProjectList.vue
@@ -1,5 +1,5 @@
 <template>
-  <d-card v-if="projects.length > 0" block class="ma-3">
+  <d-card v-if="projects.length > 0" block class="ma-2">
     <d-textfield
       v-model="search"
       class="search sticky"