Skip to content

Commit 442fe63

Browse files
nicoaleenicoalee
authored
Merge pull request #168 from brainlife/hotfix/v0.0.5-ui-fix
feat: ui improvements
2 parents 7ecfa6e + 76776eb commit 442fe63

8 files changed

Lines changed: 1408 additions & 1002 deletions

File tree

‎ui/src/BaseConvertPage.vue‎

Lines changed: 74 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -54,61 +54,59 @@
5454
</el-tooltip>
5555
</div>
5656
</div>
57-
<section
58-
style="
59-
display: flex;
60-
flex-direction: column;
61-
flex-grow: 1;
62-
max-height: 100vh;
63-
box-sizing: border-box;
64-
padding: 1rem;
65-
overflow-y: auto;
66-
"
67-
>
57+
<section class="base-convert-main">
6858
<template v-if="getSessionError">
69-
<div style="width: 100%">
70-
<el-alert type="error" :closable="false" show-icon class="base-convert-session-error" role="alert">
71-
Cannot find the session. There may have been an error during session creation, or the uploaded
72-
data may have been deleted.
73-
</el-alert>
74-
75-
<SessionDebugDownloads v-if="session?._id" wrapper-class="base-convert-error-debug" />
76-
<p v-else class="base-convert-error-no-id">No session id is available for downloads.</p>
59+
<div class="base-convert-scroll">
60+
<div class="base-convert-content">
61+
<el-alert
62+
type="error"
63+
:closable="false"
64+
show-icon
65+
class="base-convert-session-error"
66+
role="alert"
67+
>
68+
Cannot find the session. There may have been an error during session creation, or the
69+
uploaded data may have been deleted.
70+
</el-alert>
71+
72+
<SessionDebugDownloads v-if="session?._id" wrapper-class="base-convert-error-debug" />
73+
<p v-else class="base-convert-error-no-id">No session id is available for downloads.</p>
74+
</div>
7775
</div>
7876
</template>
7977

8078
<template v-else>
81-
<div style="padding: 1rem">
82-
<Upload v-if="page === 'upload'" ref="upload" />
83-
<Description v-if="page === 'description'" ref="description" />
84-
<Subject v-if="page === 'subject'" ref="subject" />
85-
<SeriesPage v-if="page === 'seriespage'" ref="seriespage" @niivue="openNiivue" />
86-
<Events v-if="page === 'event'" ref="event" @mapObjects="mapObjects" />
87-
<Objects
88-
v-if="page === 'object'"
89-
ref="object"
90-
@niivue="openNiivue"
91-
@mapObjects="mapObjects"
92-
@updateObject="updateObject"
93-
/>
94-
<Deface v-if="page === 'deface'" ref="deface" @niivue="openNiivue" />
95-
<Participant v-if="page === 'participant'" ref="participant" />
96-
<Finalize v-if="page === 'finalize'" ref="finalize" />
97-
<Feedback v-if="page === 'feedback'" ref="feedback" />
98-
99-
<br />
100-
<footer v-if="session" class="page-action">
101-
<el-button style="width: 260px" v-if="backLabel" :type="backButtonType" @click="back">
102-
<font-awesome-icon :icon="['fas', 'angle-left']" />
103-
{{ backLabel }}
104-
</el-button>
105-
<el-button style="width: 260px" v-if="nextLabel" type="primary" @click="next">
106-
{{ nextLabel }}
107-
<font-awesome-icon :icon="['fas', 'angle-right']" />
108-
</el-button>
109-
</footer>
110-
<niivue :path="niivuePath" @close="niivuePath = undefined" />
79+
<div ref="mainScroll" class="base-convert-scroll">
80+
<div class="base-convert-content">
81+
<Upload v-if="page === 'upload'" ref="upload" />
82+
<Description v-if="page === 'description'" ref="description" />
83+
<Subject v-if="page === 'subject'" ref="subject" />
84+
<SeriesPage v-if="page === 'seriespage'" ref="seriespage" @niivue="openNiivue" />
85+
<Events v-if="page === 'event'" ref="event" @mapObjects="mapObjects" />
86+
<Objects
87+
v-if="page === 'object'"
88+
ref="object"
89+
@niivue="openNiivue"
90+
@mapObjects="mapObjects"
91+
@updateObject="updateObject"
92+
/>
93+
<Deface v-if="page === 'deface'" ref="deface" @niivue="openNiivue" />
94+
<Participant v-if="page === 'participant'" ref="participant" />
95+
<Finalize v-if="page === 'finalize'" ref="finalize" />
96+
<Feedback v-if="page === 'feedback'" ref="feedback" />
97+
</div>
11198
</div>
99+
<footer v-if="session" class="page-action">
100+
<el-button style="width: 260px" v-if="backLabel" :type="backButtonType" @click="back">
101+
<font-awesome-icon :icon="['fas', 'angle-left']" />
102+
{{ backLabel }}
103+
</el-button>
104+
<el-button style="width: 260px" v-if="nextLabel" type="primary" @click="next">
105+
{{ nextLabel }}
106+
<font-awesome-icon :icon="['fas', 'angle-right']" />
107+
</el-button>
108+
</footer>
109+
<niivue :path="niivuePath" @close="niivuePath = undefined" />
112110
</template>
113111
</section>
114112
</div>
@@ -139,7 +137,6 @@ import { setSectionIDs, funcQA, fmapQA, dwiQA, petQA, setRun, setVolumeThreshold
139137
import niivue from '@/components/niivue.vue';
140138
import { IObject } from '@/store/store.types';
141139
import DisplayMode from '@/components/DisplayMode.vue';
142-
143140
export default defineComponent({
144141
components: {
145142
SessionDebugDownloads,
@@ -339,8 +336,8 @@ export default defineComponent({
339336
break;
340337
}
341338
342-
//scroll page to the top
343-
window.scrollTo(0, 0);
339+
const scrollEl = this.$refs.mainScroll as HTMLElement | undefined;
340+
scrollEl?.scrollTo({ top: 0 });
344341
}
345342
});
346343
},
@@ -517,18 +514,36 @@ export default defineComponent({
517514
}
518515
}
519516
517+
.base-convert-main {
518+
display: flex;
519+
flex-direction: column;
520+
flex-grow: 1;
521+
max-height: 100vh;
522+
min-height: 0;
523+
box-sizing: border-box;
524+
padding: 1rem;
525+
overflow: hidden;
526+
}
527+
528+
.base-convert-scroll {
529+
flex: 1 1 auto;
530+
min-height: 0;
531+
overflow-y: auto;
532+
}
533+
534+
.base-convert-content {
535+
padding: 1rem;
536+
}
537+
520538
.page-action {
521539
display: flex;
540+
flex-shrink: 0;
522541
justify-content: space-between;
523-
padding: 1rem 0;
524-
position: fixed;
525-
height: 40px;
526-
bottom: 0;
527-
width: calc(100vw - 260px - 4rem);
542+
padding: 1rem;
543+
padding-bottom: 0;
528544
background-color: white;
529-
z-index: 3;
545+
border-top: 1px solid var(--el-border-color-lighter, #ebeef5);
530546
color: #333;
531-
line-height: 60px;
532547
}
533548
534549
.base-convert-session-error {

0 commit comments

Comments
 (0)