scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-09 16:01:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add micro-interactions on the revamped modals [SCI-10265]

Browse source
This commit is contained in:
wandji20 2024-02-27 13:03:41 +01:00
parent fb734b1b3e
commit 0070db5e78
20 changed files with 493 additions and 446 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/stylesheets/tailwind/buttons.css
View file

@ -59,7 +59,9 @@
}
.btn.btn-primary:hover,
.btn.btn-success:hover{
.btn.btn-success:hover,
.btn.btn-primary:focus,
.btn.btn-success:focus{
@apply bg-sn-blue-hover text-sn-white;
}
@ -80,7 +82,8 @@
}
.btn.btn-secondary:hover,
.btn.btn-default:hover {
.btn.btn-default:hover,
.btn.btn-secondary:focus {
@apply border-sn-blue-hover;
}
@ -129,7 +132,8 @@
@apply bg-sn-delete-red text-sn-white;
}
.btn.btn-danger:hover {
.btn.btn-danger:hover,
.btn.btn-danger:focus {
@apply bg-sn-delete-red-hover;
}

42
app/javascript/vue/experiments/modals/duplicate.vue
View file

@ -1,27 +1,29 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
{{ i18n.t("experiments.clone.modal_title", { experiment: experiment.name }) }}
</h4>
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
{{ i18n.t("experiments.clone.modal_title", { experiment: experiment.name }) }}
</h4>
</div>
<div class="modal-body">
<SelectDropdown :optionsUrl="experiment.urls.projects_to_clone"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" type="submit">
{{ i18n.t('experiments.clone.modal_submit') }}
</button>
</div>
</div>
<div class="modal-body">
<SelectDropdown :optionsUrl="experiment.urls.projects_to_clone"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" @click="submit" type="submit">
{{ i18n.t('experiments.clone.modal_submit') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

61
app/javascript/vue/experiments/modals/edit.vue
View file

@ -1,38 +1,41 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" :title="experiment.name">
{{ i18n.t('experiments.edit.modal_title', { experiment: experiment.name }) }}
</h4>
</div>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus
:placeholder="i18n.t('experiments.new.name_placeholder')">
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" :title="experiment.name">
{{ i18n.t('experiments.edit.modal_title', { experiment: experiment.name }) }}
</h4>
</div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
<div class="sci-input-container-v2 h-40">
<textarea class="sci-input-field"
ref="description"
v-model="description">
</textarea>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus
ref="input"
:placeholder="i18n.t('experiments.new.name_placeholder')">
</div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
<div class="sci-input-container-v2 h-40">
<textarea class="sci-input-field"
ref="description"
v-model="description">
</textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary">
{{ i18n.t('experiments.edit.modal_create') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.edit.modal_create') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

44
app/javascript/vue/experiments/modals/move.vue
View file

@ -1,28 +1,30 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
{{ i18n.t("experiments.move.modal_title", { experiment: experiment.name }) }}
</h4>
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
{{ i18n.t("experiments.move.modal_title", { experiment: experiment.name }) }}
</h4>
</div>
<div class="modal-body">
<p><small>{{ i18n.t("experiments.move.notice") }}</small></p>
<SelectDropdown :optionsUrl="experiment.urls.projects_to_move"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" type="submit">
{{ i18n.t('experiments.move.modal_submit') }}
</button>
</div>
</div>
<div class="modal-body">
<p><small>{{ i18n.t("experiments.move.notice") }}</small></p>
<SelectDropdown :optionsUrl="experiment.urls.projects_to_move"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" @click="submit" type="submit">
{{ i18n.t('experiments.move.modal_submit') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

60
app/javascript/vue/experiments/modals/new.vue
View file

@ -1,38 +1,40 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block">
{{ i18n.t('experiments.new.modal_title') }}
</h4>
</div>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus
:placeholder="i18n.t('experiments.new.name_placeholder')">
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block">
{{ i18n.t('experiments.new.modal_title') }}
</h4>
</div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
<div class="sci-input-container-v2 h-40">
<textarea class="sci-input-field"
ref="description"
v-model="description">
</textarea>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus ref="input"
:placeholder="i18n.t('experiments.new.name_placeholder')">
</div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
<div class="sci-input-container-v2 h-40">
<textarea class="sci-input-field"
ref="description"
v-model="description">
</textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="submit" :disabled="!validName" class="btn btn-primary">
{{ i18n.t('experiments.new.modal_create') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.new.modal_create') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

46
app/javascript/vue/my_modules/modals/edit.vue
View file

@ -1,30 +1,32 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" :title="my_module.name">
{{ i18n.t('experiments.canvas.edit.modal_edit_module.title') }}
</h4>
</div>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.canvas.edit.modal_edit_module.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus>
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" :title="my_module.name">
{{ i18n.t('experiments.canvas.edit.modal_edit_module.title') }}
</h4>
</div>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.canvas.edit.modal_edit_module.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name" ref="input"
autofocus>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="submit" :disabled="!nameIsValid" class="btn btn-primary">
{{ i18n.t('experiments.canvas.edit.modal_edit_module.confirm') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!nameIsValid" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.canvas.edit.modal_edit_module.confirm') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

42
app/javascript/vue/my_modules/modals/move.vue
View file

@ -1,27 +1,29 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="my_module.name">
{{ i18n.t('experiments.table.modal_move_modules.title') }}
</h4>
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="my_module.name">
{{ i18n.t('experiments.table.modal_move_modules.title') }}
</h4>
</div>
<div class="modal-body">
<SelectDropdown :optionsUrl="my_module.urls.experiments_to_move"
:value="targetExperiment"
@change="changeExperiment" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetExperiment" type="submit">
{{ i18n.t('experiments.table.modal_move_modules.confirm') }}
</button>
</div>
</div>
<div class="modal-body">
<SelectDropdown :optionsUrl="my_module.urls.experiments_to_move"
:value="targetExperiment"
@change="changeExperiment" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetExperiment" @click="submit" type="submit">
{{ i18n.t('experiments.table.modal_move_modules.confirm') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

102
app/javascript/vue/my_modules/modals/new.vue
View file

@ -1,69 +1,71 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block">
{{ i18n.t('experiments.canvas.new_my_module_modal.title') }}
</h4>
</div>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.canvas.new_my_module_modal.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.name_placeholder')">
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block">
{{ i18n.t('experiments.canvas.new_my_module_modal.title') }}
</h4>
</div>
<label class="sci-label">
{{ i18n.t('experiments.canvas.new_my_module_modal.due_date') }}
</label>
<DateTimePicker
@change="setDueDate"
mode="datetime"
class="mb-4"
size="mb"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.due_date_placeholder')"
:clearable="true"/>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.canvas.new_my_module_modal.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus ref="input"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.name_placeholder')">
</div>
<label class="sci-label">
{{ i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_label') }}
{{ i18n.t('experiments.canvas.new_my_module_modal.due_date') }}
</label>
<SelectDropdown
<DateTimePicker
@change="setDueDate"
mode="datetime"
class="mb-4"
@change="setTags"
:options="formattedTags"
:option-renderer="tagsRenderer"
:label-renderer="tagsRenderer"
:multiple="true"
:searchable="true"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_placeholder')"
:tagsView="true" ></SelectDropdown>
size="mb"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.due_date_placeholder')"
:clearable="true"/>
<label class="sci-label">
{{ i18n.t('experiments.canvas.new_my_module_modal.assigned_users') }}
{{ i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_label') }}
</label>
<SelectDropdown
@change="setUsers"
:options="formattedUsers"
:option-renderer="usersRenderer"
:label-renderer="usersRenderer"
class="mb-4"
@change="setTags"
:options="formattedTags"
:option-renderer="tagsRenderer"
:label-renderer="tagsRenderer"
:multiple="true"
:searchable="true"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_users_placeholder')"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_placeholder')"
:tagsView="true" ></SelectDropdown>
<label class="sci-label">
{{ i18n.t('experiments.canvas.new_my_module_modal.assigned_users') }}
</label>
<SelectDropdown
@change="setUsers"
:options="formattedUsers"
:option-renderer="usersRenderer"
:label-renderer="usersRenderer"
:multiple="true"
:searchable="true"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_users_placeholder')"
:tagsView="true" ></SelectDropdown>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="submit" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.canvas.new_my_module_modal.create') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.canvas.new_my_module_modal.create') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

68
app/javascript/vue/projects/modals/edit.vue
View file

@ -1,43 +1,45 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="project.name">
{{ i18n.t('projects.index.modal_edit_project.modal_title', {project: project.name}) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name" class="sci-input-field"
autofocus="true"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="project.name">
{{ i18n.t('projects.index.modal_edit_project.modal_title', {project: project.name}) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name" class="sci-input-field"
autofocus="true" ref="input"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('projects.index.modal_edit_project.submit') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_edit_project.submit') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

48
app/javascript/vue/projects/modals/edit_folder.vue
View file

@ -1,32 +1,34 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="folder.name">
{{ i18n.t('projects.index.modal_edit_folder.title', {folder: folder.name}) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("projects.index.modal_edit_folder.folder_name_field") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field" autofocus="true"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="folder.name">
{{ i18n.t('projects.index.modal_edit_folder.title', {folder: folder.name}) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("projects.index.modal_edit_folder.folder_name_field") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field" autofocus="true" ref="input"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('projects.index.modal_edit_folder.submit') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_edit_folder.submit') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

71
app/javascript/vue/projects/modals/move.vue
View file

@ -1,44 +1,47 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ this.title }}
</h4>
</div>
<div class="modal-body">
<div class="mb-4">{{ this.description }}</div>
<div class="mb-4">
<div class="sci-input-container-v2 left-icon">
<input type="text"
v-model="query"
class="sci-input-field"
autofocus="true"
:placeholder="i18n.t('projects.index.modal_move_folder.find_folder')" />
<i class="sn-icon sn-icon-search"></i>
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ this.title }}
</h4>
</div>
<div class="modal-body">
<div class="mb-4">{{ this.description }}</div>
<div class="mb-4">
<div class="sci-input-container-v2 left-icon">
<input type="text"
v-model="query"
class="sci-input-field"
ref="input"
autofocus="true"
:placeholder="i18n.t('projects.index.modal_move_folder.find_folder')" />
<i class="sn-icon sn-icon-search"></i>
</div>
</div>
<div class="max-h-80 overflow-y-auto">
<div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
@click="selectFolder(null)"
:class="{'!bg-sn-super-light-blue': selectedFolderId == null}">
<i class="sn-icon sn-icon-projects"></i>
{{ i18n.t('projects.index.modal_move_folder.projects') }}
</div>
<MoveTree :objects="filteredFoldersTree" :value="selectedFolderId" @selectFolder="selectFolder" />
</div>
</div>
<div class="max-h-80 overflow-y-auto">
<div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
@click="selectFolder(null)"
:class="{'!bg-sn-super-light-blue': selectedFolderId == null}">
<i class="sn-icon sn-icon-projects"></i>
{{ i18n.t('projects.index.modal_move_folder.projects') }}
</div>
<MoveTree :objects="filteredFoldersTree" :value="selectedFolderId" @selectFolder="selectFolder" />
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('projects.index.modal_move_folder.submit') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_move_folder.submit') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

2
app/javascript/vue/projects/modals/move_tree.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="pl-6" v-for="object in objects" :key="object.folder.id">
<div class="pl-6" v-if="objects.length" v-for="object in objects" :key="object.folder.id">
<div class="flex items-center">
<i v-if="object.children.length > 0"
:class="{'sn-icon-up': opendedFolders[object.folder.id], 'sn-icon-down': !opendedFolders[object.folder.id]}"

74
app/javascript/vue/projects/modals/new.vue
View file

@ -1,44 +1,47 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t('projects.index.modal_new_project.modal_title') }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field"
autofocus="true"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t('projects.index.modal_new_project.modal_title') }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field"
ref="input"
autofocus="true"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('projects.index.modal_new_project.create') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_new_project.create') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>
@ -66,10 +69,12 @@ export default {
visible: false,
defaultRole: null,
error: null,
disableSubmit: false
};
},
methods: {
submit() {
this.disableSubmit = true;
axios.post(this.createUrl, {
project: {
name: this.name,
@ -83,6 +88,7 @@ export default {
}).catch((error) => {
this.error = error.response.data.name;
});
this.disableSubmit = false;
},
changeRole(role) {
this.defaultRole = role;

48
app/javascript/vue/projects/modals/new_folder.vue
View file

@ -1,32 +1,34 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t('projects.index.modal_new_project_folder.modal_title') }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t('projects.index.modal_new_project_folder.name') }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field" autofocus="true"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t('projects.index.modal_new_project_folder.modal_title') }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t('projects.index.modal_new_project_folder.name') }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field" autofocus="true" ref="input"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('projects.index.modal_new_project.create') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_new_project.create') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

70
app/javascript/vue/protocols/modals/new.vue
View file

@ -1,44 +1,46 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t("protocols.new_protocol_modal.title_new") }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field"
autofocus="true"
:placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t("protocols.new_protocol_modal.title_new") }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field"
autofocus="true" ref="input"
:placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('protocols.new_protocol_modal.create_new') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('protocols.new_protocol_modal.create_new') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

48
app/javascript/vue/repositories/modals/duplicate.vue
View file

@ -1,32 +1,34 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
{{ i18n.t('repositories.index.modal_copy.title_html', {name: repository.name }) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("repositories.index.modal_copy.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name" class="sci-input-field"
autofocus="true"
:placeholder="i18n.t('repositories.index.modal_copy.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
{{ i18n.t('repositories.index.modal_copy.title_html', {name: repository.name }) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("repositories.index.modal_copy.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name" class="sci-input-field"
autofocus="true" ref="input"
:placeholder="i18n.t('repositories.index.modal_copy.name_placeholder')" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('repositories.index.modal_copy.copy') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('repositories.index.modal_copy.copy') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

48
app/javascript/vue/repositories/modals/edit.vue
View file

@ -1,32 +1,34 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
{{ i18n.t('repositories.index.modal_rename.title_html', {name: repository.name }) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("repositories.index.modal_rename.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name" class="sci-input-field"
autofocus="true"
:placeholder="i18n.t('repositories.index.modal_rename.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
{{ i18n.t('repositories.index.modal_rename.title_html', {name: repository.name }) }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("repositories.index.modal_rename.name") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name" class="sci-input-field"
autofocus="true" ref="input"
:placeholder="i18n.t('repositories.index.modal_rename.name_placeholder')" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('repositories.index.modal_rename.rename') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('repositories.index.modal_rename.rename') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

50
app/javascript/vue/repositories/modals/new.vue
View file

@ -1,33 +1,35 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t('repositories.index.modal_create.title') }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("repositories.index.modal_create.name_label") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field"
autofocus="true"
:placeholder="i18n.t('repositories.index.modal_create.name_placeholder')" />
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
{{ i18n.t('repositories.index.modal_create.title') }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("repositories.index.modal_create.name_label") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field"
autofocus="true" ref="input"
:placeholder="i18n.t('repositories.index.modal_create.name_placeholder')" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('repositories.index.modal_create.submit') }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('repositories.index.modal_create.submit') }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>

4
app/javascript/vue/shared/access_modal/assign_flyout.vue
View file

@ -8,6 +8,7 @@
<div class="sci-input-container-v2 left-icon">
<input type="text" v-model="query" class="sci-input-field"
autofocus="true"
ref="input"
:placeholder="i18n.t('access_permissions.partials.new_assignments_form.find_people_html')" />
<i class="sn-icon sn-icon-search"></i>
</div>
@ -80,6 +81,9 @@ export default {
mounted() {
this.getUnAssignedUsers();
this.getRoles();
this.$nextTick(() => {
this.$refs.input?.focus();
});
},
components: {
MenuDropdown,

1
app/javascript/vue/shared/modal_mixin.js
View file

@ -1,6 +1,7 @@
export default {
mounted() {
$(this.$refs.modal).modal('show');
this.$refs.input?.focus();
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('close');
});