Skip to content

Commit 9033675

Browse files
AramManukyanAramManukyan
committed
Modal media
1 parent 60b1dcf commit 9033675

6 files changed

Lines changed: 259 additions & 134 deletions

File tree

‎bower.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"responsive-bootstrap-toolkit": "~2.5.0",
2020
"Sortable": "~1.4.2",
2121
"tether": "~1.1.1",
22-
"tinycolor": "~1.2.1"
22+
"tinycolor": "~1.2.1",
23+
"dropzone": "~4.2.0"
2324
},
2425
"overrides": {
2526
"bootstrap": {
@@ -50,7 +51,7 @@
5051
"animate.css": {
5152
"main": "animate.css"
5253
},
53-
"Sortable":{
54+
"Sortable": {
5455
"main": [
5556
"Sortable.js",
5657
"jquery.binding.js"
@@ -62,6 +63,12 @@
6263
"dist/quill.base.css",
6364
"dist/quill.snow.css"
6465
]
66+
},
67+
"dropzone": {
68+
"main": [
69+
"dist/dropzone.css",
70+
"dist/dropzone.js"
71+
]
6572
}
6673
}
6774
}

‎src/_common/images-container/images-container.scss‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
.images-container {
2+
@include clearfix();
3+
4+
// padding-top: 30px;
5+
6+
.image-container {
7+
float: left;
8+
padding: 3px;
9+
margin-right: 10px;
10+
margin-bottom: 35px;
11+
position: relative;
12+
border: 1px solid lighten($color-divider, 5%);
13+
overflow: hidden;
14+
// box-shadow: 0 0 3px #BFBFBF;
15+
// border-radius: 3px;
16+
17+
18+
&.active {
19+
border-color: $color-primary;
20+
}
21+
22+
// .controls {
23+
// transition: opacity .2s ease;
24+
// opacity: 0;
25+
// }
26+
27+
&:hover {
28+
.controls {
29+
bottom: 0;
30+
opacity: 1;
31+
}
32+
}
33+
}
34+
35+
.controls {
36+
position: absolute;
37+
left: 0;
38+
right: 0;
39+
opacity: 0;
40+
bottom: -35px;
41+
text-align: center;
42+
height: 35px;
43+
// background-color: lighten($color-divider, 8%);
44+
font-size: 24px;
45+
transition: bottom 0.2s ease, opacity 0.2s ease;
46+
background-color: #fff;
47+
48+
@include clearfix();
49+
50+
.control-btn {
51+
display: inline-block;
52+
color: $color-text;
53+
// border-radius: 3px;
54+
cursor: pointer;
55+
width: 35px;
56+
height: 35px;
57+
line-height: 35px;
58+
text-align: center;
59+
// color: $color-text-inverse;
60+
opacity: 0.5;
61+
transition: opacity 0.3s ease;
62+
63+
&:hover {
64+
opacity: 1;
65+
}
66+
67+
68+
69+
&.move {
70+
cursor: move;
71+
}
72+
73+
&.star {
74+
color: #FFB300;
75+
76+
i:before{
77+
content: "\f006";
78+
}
79+
80+
&.active {
81+
i:before{
82+
content: "\f005";
83+
}
84+
}
85+
}
86+
87+
&.remove {
88+
color: $color-danger;
89+
}
90+
}
91+
}
92+
93+
.image {
94+
background-size: cover;
95+
background-position: center;
96+
background-repeat: no-repeat;
97+
width: 130px;
98+
height: 135px;
99+
// cursor: pointer;
100+
line-height: 135px;
101+
text-align: center;
102+
103+
104+
105+
&:active {
106+
107+
}
108+
}
109+
110+
.image-container.main {
111+
border-color: #FFB300;
112+
}
113+
114+
.image-container.new {
115+
opacity: 0.6;
116+
transition: opacity 0.3s ease;
117+
border-style: dashed;
118+
border: 1px $color-primary solid;
119+
color: $color-primary;
120+
121+
.image {
122+
font-size: 2.5rem;
123+
}
124+
125+
&:hover {
126+
opacity: 1;
127+
}
128+
}
129+
}

‎src/app/_common/modals/modal-media/modal-media.hbs‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,49 @@
88
</button>
99
<h4 class="modal-title">Media Library</h4>
1010
</div>
11-
<div class="modal-body">
12-
11+
<div class="modal-body modal-tab-container">
12+
13+
<ul class="modal-tabs">
14+
<li class="modal-tab-item">
15+
<a href="#gallery">Gallery</a>
16+
</li>
17+
<li class="modal-tab-item">
18+
<a class="active" href="#upload">Upload</a>
19+
</li>
20+
</ul>
21+
22+
<div class="modal-tab-content">
23+
<div class="modal-tab-pane fade" id="gallery">
24+
<div class="images-container">
25+
{{#each images}}
26+
<div class="image-container">
27+
<div class="controls">
28+
<a href="" class="control-btn move">
29+
<i class="fa fa-arrows"></i>
30+
</a><!--
31+
--><a href="" class="control-btn star">
32+
<i class="fa"></i>
33+
</a><!--
34+
--><a href="#" class="control-btn remove" data-toggle="modal" data-target="#confirm-modal">
35+
<i class="fa fa-trash-o"></i>
36+
</a>
37+
</div>
38+
<div class="image" style="background-image:url('{{this.url}}')"></div>
39+
</div>
40+
{{/each}}
41+
</div>
42+
</div>
43+
<div class="modal-tab-pane fade" id="upload">
44+
<div id="dropzone">
45+
<form action="/" method="POST" enctype="multipart/form-data" class="dropzone needsclick dz-clickable" id="demo-upload">
46+
<div class="dz-message needsclick">
47+
Drop files here or click to upload.<br>
48+
<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
49+
</div>
50+
</form>
51+
</div>
52+
</div>
53+
</div>
1354
</div>
1455
<div class="modal-footer">
1556
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

‎src/app/_common/modals/modal-media/modal-media.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,38 @@ var modalMedia = {
2020
this.options.beforeClose(this.result);
2121
}
2222
}
23-
};
23+
};
24+
25+
$(function(){
26+
27+
activateTab('#upload');
28+
29+
$('.modal-tab-item a').on('click', function(e){
30+
e.preventDefault();
31+
32+
activateTab(e.target.hash);
33+
});
34+
35+
function activateTab(tabId){
36+
37+
var $modalTabs = $('.modal-tabs');
38+
var $modalTabsPane = $('.modal-tab-pane');
39+
40+
// reset item tabs and panels
41+
$modalTabs.find('a').removeClass('active');
42+
$modalTabsPane.removeClass('active in ');
43+
44+
// set active tab
45+
var $activeTab = $modalTabs.find('a[href="' + tabId + '"]');
46+
47+
// activate current tab and pane
48+
$activeTab.addClass('active');
49+
50+
$(tabId).addClass('active')
51+
.delay(150)
52+
.queue(function(next){
53+
$(this).addClass("in");
54+
next();
55+
});
56+
};
57+
})

‎src/app/_common/modals/modals.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,47 @@
1313
margin-bottom: 0;
1414
}
1515
}
16+
17+
.modal-body.modal-tab-container {
18+
padding: 0;
19+
20+
.modal-tabs {
21+
padding-left: 0;
22+
margin-bottom: 0;
23+
list-style:none;
24+
background-color: #ffffff;
25+
border-bottom: 1px solid #ddd;
26+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
27+
28+
.modal-tab-item {
29+
display: inline;
30+
31+
a {
32+
display: inline-block;
33+
padding: 10px 20px;
34+
35+
&:hover,
36+
&.active {
37+
border-bottom: 2px solid $color-primary;
38+
}
39+
40+
&.active {
41+
font-weight: 600;
42+
}
43+
}
44+
}
45+
}
46+
47+
.modal-tab-content {
48+
.modal-tab-pane {
49+
display: none;
50+
padding: 5px 10px;
51+
52+
&.active {
53+
display: block;
54+
}
55+
}
56+
}
57+
}
1658
}
1759
}

0 commit comments

Comments
 (0)