Skip to content

Commit efcd809

Browse files
LunguGeorgeProgramatorLunguGeorgeProgramator
committed
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)