Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit efcd809

Browse files
add vue modal pop up for folder edit remove UI
1 parent 46f0c18 commit efcd809

File tree

7 files changed

+103
-16
lines changed

7 files changed

+103
-16
lines changed

‎media/css/vue-modal.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
.vm-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);}
3+
.vm-wrapper {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; outline: 0;}
4+
.vm {position: relative; margin: 0px auto; width: calc(100% - 20px); min-width: 110px; max-width:500px; background-color: #fff; top:30px; cursor: default; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);}
5+
.vm-titlebar {padding:10px 15px 10px 15px; overflow: auto; border-bottom: 1px solid #e5e5e5;}
6+
.vm-title {margin-top:2px; margin-bottom: 0px; display: inline-block; font-size:18px; font-weight: normal;}
7+
.vm-btn-close {color: #ccc; padding: 0px; cursor: pointer; background: 0 0; border: 0; float: right; font-size: 24px; line-height: 1em;}
8+
.vm-btn-close:before {content: ×ばつ'; font-family: Arial;}
9+
.vm-btn-close:hover, .vm-btn-close:focus, .vm-btn-close:focus:hover{color:#bbb; border-color: transparent; background-color: transparent;}
10+
.vm-content {padding:10px 15px 15px 15px;}
11+
.vm-content .full-hr {width: auto; border: 0; border-top: 1px solid #e5e5e5; margin-top:15px; margin-bottom:15px; margin-left:-14px; margin-right:-14px;}
12+
.vm-fadeIn {animation-name: vm-fadeIn;}
13+
@keyframes vm-fadeIn {0% {opacity: 0}
14+
100% {opacity: 1}}
15+
.vm-fadeOut {animation-name: vm-fadeOut;}
16+
@keyframes vm-fadeOut {0% {opacity: 1}
17+
100% {opacity: 0}}
18+
.vm-fadeIn, .vm-fadeOut {animation-duration: .25s; animation-fill-mode: both;}
19+
.check-delete-input {z-index: 0; position: absolute; top: 6px;}
20+
.check-delete-label {z-index: 1; position: relative; padding-left: 20px;}

‎media/js/vue-modal.umd.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎media/js/vue-modal.umd.min.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/head.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
7-
87
<link rel="stylesheet" href="{{ MEDIA_URL }}css/bootstrap.min.css">
98
<link rel="stylesheet" href="{{ MEDIA_URL }}css/jquery.ui.min.css">
9+
<link rel="stylesheet" href="{{ MEDIA_URL }}css/vue-modal.css">
1010
<link rel="stylesheet" href="{{ MEDIA_URL }}css/custom.css">
1111
<script src="{{ MEDIA_URL }}js/jquery-3.4.1.min.js"></script>
1212
<script src="{{ MEDIA_URL }}js/jquery.ui.min.js"></script>
1313
<script src="{{ MEDIA_URL }}js/vue.min.js"></script>
14+
<script src="{{ MEDIA_URL }}js/vue-modal.umd.min.js"></script>
1415
<script src="{{ MEDIA_URL }}js/axios.min.js"></script>
16+
1517
</head>

‎templates/index.html‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{% block head %}
33
{% include "head.html" %}
44
{% endblock %}
5-
{% load static %}
5+
{% load static %}
66
<div class="container">
77
{% if prev != None %}
88
<nav aria-label="...">
@@ -13,7 +13,6 @@
1313
</ul>
1414
</nav>
1515
{% endif %}
16-
1716
<div class="row">
1817
<form action="{% url 'search_main' %}" class="form-inline" method="get">
1918
<div class="form-group mx-sm-3 mb-2">
@@ -26,19 +25,25 @@
2625
</div>
2726
</form>
2827
</div>
29-
30-
31-
<div class="row">
32-
{% for file in complete_list %}
33-
<div class="col-3">
34-
<div class="ex2">
35-
<a target="_blank" href="{% url 'view_main' file.dir_name_encoded %}"><img width="250" src="{% static file.files_in_dir %}"></a>
28+
<div id="app">
29+
<div class="row">
30+
{% for file in complete_list %}
31+
<div class="col-3">
32+
<div class="ex2">
33+
<a target="_blank" href="{% url 'view_main' file.dir_name_encoded %}"><img width="250" src="{% static file.files_in_dir %}"></a>
34+
</div>
35+
<div class="ex3">
36+
<!-- <input v-model="checkedDirName"> -->
37+
<!-- <input v-bind:value="checkedDirName" v-on:input="checkedDirName = $event.target.value"> -->
38+
<input type="button" v-bind:value="checkedDirName" v-on:click="(checkedDirName = '{{ file.dir_name }}'), (show_modal_1=true)" value="Edit">
39+
{{ file.dir_name }}
40+
</div>
3641
</div>
37-
<div class="ex3">
38-
{{ file.dir_name }}
39-
</div>
42+
{% endfor %}
4043
</div>
41-
{% endfor %}
44+
{% block hidden %}
45+
{% include "vue_modal.html" %}
46+
{% endblock %}
4247
</div>
4348
{% if prev != None %}
4449
<nav aria-label="...">

‎templates/view.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,13 @@
2525
<li class="page-item"><a class="page-link" href="{% url 'index_main' %}">Main page</a></li>
2626
</ul>
2727
</nav>
28-
<div class="row"><i>{{ folder_name }}</i></div>
29-
</div>
28+
<div class="row">
29+
<i>{{ folder_name }}</i>
30+
<div id="app">
31+
<input type="button" v-bind:value="checkedDirName" v-on:click="(checkedDirName = '{{ folder_name }}'), (show_modal_1=true)" value="Edit">
32+
{% block hidden %}
33+
{% include "vue_modal.html" %}
34+
{% endblock %}
35+
</div>
36+
</div>
37+
</div>

‎templates/vue_modal.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<Modal v-model="show_modal_1" title="Folder option:" cssClass="mw10">
2+
<form novalidate>
3+
<div class="form-group">
4+
<label for="folderName">Rename Folder Name</label>
5+
<input v-model="checkedDirName" type="text" class="form-control" id="folderName" placeholder="Folder Name">
6+
</div>
7+
<div class="form-group">
8+
<div class="form-check">
9+
<!-- <input v-model:="checkedDelete" type="checkbox" id="jack" value="Jack" v-on:click="confimBox()"> -->
10+
<input class="check-delete-input" type="checkbox" id="checkbox" v-model="checkedDeleteValidation">
11+
<label class="form-check-label check-delete-label" for="gridCheck" v-on:click="confimBox()">
12+
Check to remove folder forever:
13+
</label>
14+
</div>
15+
</div>
16+
<hr class="full-hr">
17+
<div class="row">
18+
<div class="col-sm-12">
19+
<div class="float-right">
20+
<button class="btn btn-primary" type="button" @click="show_modal_1=false">Ok</button>
21+
<button class="btn btn-secondary ml-2" type="button" @click="show_modal_1=false">Cancel</button>
22+
</div>
23+
</div>
24+
</div>
25+
</form>
26+
</Modal>
27+
28+
<script type="text/javascript">
29+
Vue.component('Modal', VueModal);
30+
new Vue({
31+
delimiters: ['||', '||'],
32+
el: '#app',
33+
data: {
34+
show_modal_1: false,
35+
checkedDirName: '',
36+
checkedDeleteValidation: false
37+
},
38+
methods: {
39+
confimBox () {
40+
if(this.checkedDeleteValidation == false && confirm('Are you sure?')){
41+
this.checkedDeleteValidation = true;
42+
} else {
43+
this.checkedDeleteValidation = false;
44+
}
45+
}
46+
47+
}
48+
});
49+
</script>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /