mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-16 06:06:56 +08:00
71 lines
2.1 KiB
Vue
71 lines
2.1 KiB
Vue
<template>
|
|
<div ref="modal" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog" role="document" :class="[{'!w-[900px]' : showingInfo}, {'!w-[600px]' : !showingInfo}]">
|
|
<div class="modal-content !p-0 bg-sn-white w-full h-full flex" :class="[{'flex-row': showingInfo}, {'flex-col': !showingInfo}]">
|
|
<div id="body-container" class="flex flex-row w-full h-full">
|
|
<!-- info -->
|
|
<div id="info-part">
|
|
<InfoComponent
|
|
v-if="showingInfo"
|
|
:infoParams="infoParams"
|
|
/>
|
|
</div>
|
|
<!-- content -->
|
|
<div id="content-part" class="flex flex-col w-full p-6 gap-6">
|
|
<!-- header -->
|
|
<div id="info-modal-header" class="flex flex-row h-fit w-full justify-between">
|
|
<div id="title-with-help" class="flex flex-row gap-3">
|
|
<h3 class="modal-title text-sn-dark-grey">{{ title }}</h3>
|
|
<button class="btn btn-light btn-sm" @click="showingInfo = !showingInfo">
|
|
<i class="sn-icon sn-icon-help-s"></i>
|
|
{{ helpText }}
|
|
</button>
|
|
</div>
|
|
<button id="close-btn" type="button" class="close my-auto" data-dismiss="modal" aria-label="Close">
|
|
<i class="sn-icon sn-icon-close"></i>
|
|
</button>
|
|
</div>
|
|
<!-- main content -->
|
|
<div id="info-modal-main-content" class="h-full">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import modalMixin from './modal_mixin';
|
|
import InfoComponent from './info_component.vue';
|
|
|
|
export default {
|
|
name: 'InfoModal',
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
helpText: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
infoParams: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
startHidden: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
mixins: [modalMixin],
|
|
components: { InfoComponent },
|
|
data() {
|
|
return {
|
|
showingInfo: true
|
|
};
|
|
}
|
|
};
|
|
</script>
|