Skip to content

Commit 64f7426

Browse files
egauzensegauzens
committed
added radio and large modal
1 parent e057d16 commit 64f7426

File tree

6 files changed

+297
-6
lines changed

6 files changed

+297
-6
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sparc-design-system-components-2",
3-
"version": "0.0.10",
3+
"version": "0.0.11",
44
"private": false,
55
"scripts": {
66
"dev": "vite",

‎src/App.vue

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,77 @@
101101
</el-button>
102102
</template>
103103
</el-dialog>
104+
<large-modal
105+
:visible="dialogVisibleLarge"
106+
@close-download-dialog="dialogVisibleLarge = false"
107+
>
108+
<template class="content" #optionalContent>
109+
<h1>Direct download</h1>
110+
<div>
111+
<p>You can download the raw files and metadata directly to your computer as a zip archive free of charge.</p>
112+
<p class="download-container__download-dataset-size">
113+
Dataset Size: 17.43 GB
114+
</p>
115+
<el-button class="download-button">Download</el-button>
116+
</div>
117+
</template>
118+
<template class="content" #mainContent>
119+
<h1>Download from AWS</h1>
120+
<p>
121+
Raw files and metadata are stored in an AWS S3 Requester Pays bucket.
122+
You can learn more about downloading data from AWS on our
123+
<a href="/#" target="_blank">Help Page</a>.
124+
</p>
125+
<div>
126+
<p>*Requester pays means that any costs associated with downloading the data will be charged to your AWS account.
127+
For transfer pricing information, visit the <a href="https://aws.amazon.com/s3/pricing/" target="blank">AWS Pricing documentation.</a>
128+
</p>
129+
<div>
130+
<el-button class="secondary" @click="dialogVisibleLarge = false">
131+
Close
132+
</el-button>
133+
</div>
134+
</div>
135+
</template>
136+
</large-modal>
137+
<el-button
138+
plain
139+
@click="dialogVisibleLarge = true">
140+
Open Large Modal
141+
</el-button>
142+
<div>
143+
<sparc-radio
144+
v-model="radioVal"
145+
label="1"
146+
:disabled="false"
147+
display="Option 1"
148+
/>
149+
<sparc-radio
150+
v-model="radioVal"
151+
label="2"
152+
:disabled="false"
153+
display="Option 2"
154+
/>
155+
</div>
156+
<div>
157+
<sparc-radio
158+
v-for="r in radios"
159+
v-bind:key="r.label"
160+
v-model="radioVal2"
161+
:label="r.label"
162+
:disabled="r.disabled"
163+
:display="r.display"
164+
/>
165+
</div>
104166
</main>
105167
</template>
106168

107169
<script>
108170
import HelloWorld from './components/HelloWorld.vue'
109171
import SparcTooltip from './components/SparcTooltip.vue'
110172
import SparcLogo from './components/SparcLogo.vue'
173+
import LargeModal from './components/LargeModal.vue'
174+
import SparcRadio from './components/SparcRadio.vue'
111175
import { ref } from 'vue'
112176
import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
113177
@@ -350,7 +414,9 @@
350414
components: {
351415
HelloWorld,
352416
SparcTooltip,
353-
SparcLogo
417+
SparcLogo,
418+
LargeModal,
419+
SparcRadio
354420
},
355421
name: 'App',
356422
setup() {
@@ -368,12 +434,36 @@
368434
'right-center',
369435
'right-bottom'
370436
])
437+
const radioVal=ref("1");
438+
const radioVal2 = ref(5);
439+
const radios = ref([
440+
{
441+
label: 4,
442+
display: "Option 1",
443+
disabled: false
444+
},
445+
{
446+
label: 5,
447+
display: "Option 2",
448+
disabled: false
449+
},
450+
{
451+
label: 6,
452+
display: "Option 3",
453+
disabled: true
454+
}
455+
])
371456
const dialogVisible = ref(false)
457+
const dialogVisibleLarge = ref(false)
372458
373459
return {
374460
dialogVisible,
461+
dialogVisibleLarge,
375462
tableData,
376-
tooltipDirs
463+
tooltipDirs,
464+
radioVal,
465+
radioVal2,
466+
radios
377467
}
378468
},
379469
methods: {

‎src/components/LargeModal.vue

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<el-dialog
3+
:modelValue="visible"
4+
:show-close="true"
5+
class="sparc-design-system-large-modal-dialog"
6+
@close="closeDialog"
7+
>
8+
<div class="dialog-container">
9+
<div class="optional-content-container">
10+
<slot name="optionalContent" />
11+
</div>
12+
<div class="main-content-container">
13+
<slot name="mainContent" />
14+
</div>
15+
</div>
16+
<el-button class="primary">Test</el-button>
17+
</el-dialog>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'LargeModal',
23+
props: {
24+
visible: {
25+
type: Boolean,
26+
default: false
27+
}
28+
},
29+
30+
setup(props, { emit }) {
31+
function closeDialog() {
32+
emit('close-download-dialog');
33+
}
34+
return {
35+
closeDialog,
36+
};
37+
}
38+
};
39+
</script>
40+
41+
<style lang="scss">
42+
43+
@import '../assets/_variables.scss';
44+
.sparc-design-system-large-modal-dialog {
45+
border-radius: 0;
46+
width: fit-content;
47+
max-width: 868px;
48+
button:hover {
49+
box-shadow: none;
50+
}
51+
.optional-content-container {
52+
.download-button {
53+
padding-top: 10px;
54+
padding-bottom: 10px;
55+
background: white !important;
56+
text-align: center;
57+
color: $purple !important;
58+
min-width: 80px;
59+
}
60+
button:hover {
61+
background: white;
62+
color: $purple;
63+
}
64+
}
65+
66+
.el-dialog__body {
67+
padding: 0;
68+
color: black;
69+
}
70+
71+
.el-dialog__header {
72+
padding: 0 !important;
73+
}
74+
}
75+
</style>
76+
77+
<style lang="scss" scoped>
78+
@import '../assets/_variables.scss';
79+
80+
.sparc-design-system-large-modal-dialog {
81+
.dialog-container {
82+
display: flex;
83+
word-break: normal;
84+
}
85+
86+
.main-content-container {
87+
border: 1px solid $lineColor1;
88+
border-left: none;
89+
width: 100%;
90+
padding: 2rem;
91+
}
92+
93+
.optional-content-container {
94+
background-color: $purple;
95+
box-sizing: border-box;
96+
flex-shrink: 0;
97+
color: #fff;
98+
max-width: 316px;
99+
min-width: min-content;
100+
width: 35%;
101+
overflow: hidden;
102+
position: relative;
103+
padding: 2rem;
104+
}
105+
106+
.optional-content-container:empty {
107+
display: none;
108+
}
109+
110+
.close-dialog {
111+
background: none;
112+
border: none;
113+
cursor: pointer;
114+
padding: .25rem .25rem 0 0;
115+
position: absolute;
116+
right: 0;
117+
}
118+
}
119+
</style>

‎src/components/SparcLogo.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<template>
22
<img class="logo" :src="logoSrc" alt="Logo for SPARC">
3-
<help-icon height="32" fill="red"/>
4-
<el-button>Testing 1</el-button>
5-
<el-button class="secondary">Testing 2</el-button>
63
</template>
74

85
<script>

‎src/components/SparcRadio.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<el-radio
3+
:label="label"
4+
:disabled="disabled"
5+
:modelValue="current"
6+
>
7+
{{ display }}
8+
</el-radio>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'SparcRadio',
14+
15+
props: {
16+
value: {
17+
type: [String, Number, Boolean],
18+
required: true
19+
},
20+
label: {
21+
type: [String, Number, Boolean],
22+
required: true
23+
},
24+
disabled: {
25+
type: Boolean,
26+
default: false
27+
},
28+
display: {
29+
type: [String, Number],
30+
required: true
31+
}
32+
},
33+
34+
computed: {
35+
current: {
36+
get: function() {
37+
return this.value
38+
},
39+
set: function(val) {
40+
this.$emit('input', val)
41+
}
42+
}
43+
}
44+
}
45+
</script>
46+
47+
<style lang="scss" scoped>
48+
@import '../assets/_variables.scss';
49+
:deep(.el-radio__label) {
50+
color: $grey;
51+
}
52+
:deep(.el-radio__input) {
53+
&.is-disabled {
54+
&.is-checked {
55+
.el-radio__inner {
56+
background-color: #909399;
57+
&::after {
58+
background-color: white;
59+
opacity: 80%;
60+
}
61+
}
62+
}
63+
}
64+
&:not(.is-checked) {
65+
.el-radio__inner {
66+
border-color: $lightGrey;
67+
}
68+
}
69+
}
70+
71+
.el-radio {
72+
margin-left: 0;
73+
padding-top: 5px;
74+
&:first-child {
75+
padding-top: 0;
76+
}
77+
}
78+
79+
</style>

‎src/components/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import '../assets/styles.scss';
22

33
import SparcLogo from './SparcLogo.vue';
4+
import LargeModal from './LargeModal.vue'
5+
import SparcTooltip from './SparcTooltip.vue'
6+
import SparcRadio from './SparcRadio.vue';
47

58
export default {
69
install(app) {
710
app.component('SparcLogo', SparcLogo);
11+
app.component('LargeModal', LargeModal);
12+
app.component('SparcTooltip', SparcTooltip);
13+
app.component('SparcRadio', SparcRadio);
814
},
915
};

0 commit comments

Comments
 (0)