Skip to content

Commit ba92cab

Browse files
farzindevfarzindev
committed
Widgets Styles improved.
1 parent d37be24 commit ba92cab

4 files changed

Lines changed: 151 additions & 150 deletions

File tree

‎BlogEngine/BlogEngine.NET/admin/app/custom/widgets/widgetView.html‎

Lines changed: 70 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -8,127 +8,99 @@ <h4 class="modal-title">{{lbl.edit}} {{lbl.widgets}}</h4>
88
</div>
99
<div class="modal-body">
1010
<div class="form-group">
11-
<input type="text" class="header-txt" id="txtWidgetTitle" name="txtWidgetTitle" value="xxx" />
12-
<button type="button" class="btn btn-success btn-sm" ng-click="updateTitle()">{{lbl.save}}</button>
11+
<div class="input-group">
12+
<input type="text" class="form-control" id="txtWidgetTitle" name="txtWidgetTitle" value="xxx" />
13+
<div class="input-group-btn">
14+
<button type="button" class="btn btn-success" ng-click="updateTitle()">Change Name</button>
15+
</div>
16+
</div>
1317
</div>
14-
<hr />
1518
<iframe id="settingsFrame" ng-src="{{editSrc}}"></iframe>
1619
</div>
1720
</div>
1821
</div>
1922
</div>
2023
<div class="main-header clearfix">
2124
<h2 class="page-title pull-left">{{lbl.widgets}}</h2>
22-
<button type="button" ng-click='save()' class="btn btn-success btn-sm btn-hasicon pull-left"><i class="fa fa-check"></i>{{lbl.save}}</button>
25+
<button type="button" ng-click="save()" class="btn btn-success btn-sm btn-hasicon pull-left"><i class="fa fa-check"></i>{{lbl.save}}</button>
2326
</div>
2427
<div class="content-inner">
2528
<div class="row">
26-
<div class="col-lg-6">
27-
<h3>Available Widgets</h3>
28-
<div class='unstyled-list'>
29-
<div class="draggable" ng-repeat='iw in vm.AvailableWidgets' draggable="iw" draggable-target='.sortable'>
30-
<div class="panel panel-primary">
31-
<div class="panel-body">{{ iw.Title }}</div>
32-
</div>
33-
</div>
34-
</div>
29+
<div class="col-sm-2">
30+
<h4>Available Widgets</h4>
31+
<ul class="widgets-list">
32+
<li class="draggable" ng-repeat="iw in vm.AvailableWidgets" draggable="iw" draggable-target=".sortable">{{ iw.Title }}</li>
33+
</ul>
3534
</div>
36-
<div class="col-lg-6" id="w-zones">
37-
<div ng-if="widgetZones.titles && widgetZones.titles.length > 0">
38-
<h3>{{widgetZones.titles[0]}}</h3>
39-
<div droppable='widgetZones.list1' ng-move='moveObject(from, to, fromList, toList)'
40-
ng-create='createObject(object, to, list)' id="list1" class="sortable">
41-
<div ng-if="widgetZones.list1.length < 1" class="sortable-empty">Drag widget here</div>
42-
<div class="ui-state-default" ng-repeat="item in widgetZones.list1 track by item.Id">
43-
<div class="panel panel-primary">
44-
<div class="panel-body">
45-
{{item.Title}}
46-
<div class="btn-group pull-right">
47-
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[0])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
48-
<button type="button" ng-click='deleteItem(item.Id, widgetZones.list1, widgetZones.titles[0])' class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
49-
</div>
35+
<div class="col-sm-10" id="w-zones">
36+
<div class="row">
37+
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 0">
38+
<h4>Widget Zone <span>({{widgetZones.titles[0]}})</span></h4>
39+
<ul class="sortable widgets-list widgets-list-active" droppable="widgetZones.list1" ng-move="moveObject(from, to, fromList, toList)" ng-create="createObject(object, to, list)" id="list1">
40+
<li ng-if="widgetZones.list1.length < 1" class="sortable-empty">Drag widget here</li>
41+
<li class="ui-state-default" ng-repeat="item in widgetZones.list1 track by item.Id">
42+
{{item.Title}}
43+
<div class="item-buttons">
44+
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[0])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
45+
<button ng-click="deleteItem(item.Id, widgetZones.list1, widgetZones.titles[0])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
5046
</div>
51-
</div>
52-
</div>
47+
</li>
48+
</ul>
5349
</div>
54-
</div>
55-
<div ng-if="widgetZones.titles && widgetZones.titles.length > 1">
56-
<h3>{{widgetZones.titles[1]}}</h3>
57-
<div droppable='widgetZones.list2' ng-move='moveObject(from, to, fromList, toList)'
58-
ng-create='createObject(object, to, list)' id="list2" class="sortable">
59-
<div ng-if="widgetZones.list2.length < 1" class="sortable-empty">Drag widget here</div>
60-
<div class="ui-state-default" ng-repeat="item in widgetZones.list2 track by item.Id">
61-
<div class="panel panel-primary">
62-
<div class="panel-body">
63-
{{ item.Title }}
64-
<div class="btn-group pull-right">
65-
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[1])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
66-
<button type="button" ng-click='deleteItem(item.Id, widgetZones.list2, widgetZones.titles[1])' class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
67-
</div>
50+
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 1">
51+
<h4>Widget Zone <span>({{widgetZones.titles[1]}})</span></h4>
52+
<ul class="sortable widgets-list widgets-list-active" droppable="widgetZones.list2" ng-move="moveObject(from, to, fromList, toList)" ng-create="createObject(object, to, list)" id="list2">
53+
<li ng-if="widgetZones.list2.length < 1" class="sortable-empty">Drag widget here</li>
54+
<li class="ui-state-default" ng-repeat="item in widgetZones.list2 track by item.Id">
55+
{{ item.Title }}
56+
<div class="item-buttons">
57+
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[1])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
58+
<button ng-click="deleteItem(item.Id, widgetZones.list2, widgetZones.titles[1])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
6859
</div>
69-
</div>
70-
</div>
60+
</li>
61+
</ul>
7162
</div>
72-
</div>
73-
<div ng-if="widgetZones.titles && widgetZones.titles.length > 2">
74-
<h3>{{widgetZones.titles[2]}}</h3>
75-
<div droppable='widgetZones.list3' ng-move='moveObject(from, to, fromList, toList)'
76-
ng-create='createObject(object, to, list)' id="list3" class="sortable">
77-
<div ng-if="widgetZones.list3.length < 1" class="sortable-empty">Drag widget here</div>
78-
<div class="ui-state-default" ng-repeat="item in widgetZones.list3 track by item.Id">
79-
<div class="panel panel-primary">
80-
<div class="panel-body">
81-
{{ item.Title }}
82-
<div class="btn-group pull-right">
83-
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[2])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
84-
<button type="button" ng-click='deleteItem(item.Id, widgetZones.list3, widgetZones.titles[2])' class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
85-
</div>
63+
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 2">
64+
<h4>Widget Zone <span>({{widgetZones.titles[2]}})</span></h4>
65+
<ul class="sortable widgets-list widgets-list-active" droppable="widgetZones.list3" ng-move="moveObject(from, to, fromList, toList)" ng-create="createObject(object, to, list)" id="list3">
66+
<li ng-if="widgetZones.list3.length < 1" class="sortable-empty">Drag widget here</li>
67+
<li class="ui-state-default" ng-repeat="item in widgetZones.list3 track by item.Id">
68+
{{ item.Title }}
69+
<div class="item-buttons">
70+
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[2])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
71+
<button ng-click="deleteItem(item.Id, widgetZones.list3, widgetZones.titles[2])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
8672
</div>
87-
</div>
88-
</div>
73+
</li>
74+
</ul>
8975
</div>
90-
</div>
91-
<div ng-if="widgetZones.titles && widgetZones.titles.length > 3">
92-
<h3>{{widgetZones.titles[3]}}</h3>
93-
<div droppable='widgetZones.list4' ng-move='moveObject(from, to, fromList, toList)'
94-
ng-create='createObject(object, to, list)' id="list4" class="sortable">
95-
<div ng-if="widgetZones.list4.length < 1" class="sortable-empty">Drag widget here</div>
96-
<div class="ui-state-default" ng-repeat="item in widgetZones.list4 track by item.Id">
97-
<div class="panel panel-primary">
98-
<div class="panel-body">
99-
{{ item.Title }}
100-
<div class="btn-group pull-right">
101-
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[3])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
102-
<button type="button" ng-click='deleteItem(item.Id, widgetZones.list4, widgetZones.titles[3])' class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
103-
</div>
76+
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 3">
77+
<h4>Widget Zone <span>({{widgetZones.titles[3]}})</span></h4>
78+
<ul class="sortable widgets-list widgets-list-active" droppable="widgetZones.list4" ng-move="moveObject(from, to, fromList, toList)" ng-create="createObject(object, to, list)" id="list4">
79+
<li ng-if="widgetZones.list4.length < 1" class="sortable-empty">Drag widget here</li>
80+
<li class="ui-state-default" ng-repeat="item in widgetZones.list4 track by item.Id">
81+
{{ item.Title }}
82+
<div class="item-buttons">
83+
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[3])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
84+
<button ng-click="deleteItem(item.Id, widgetZones.list4, widgetZones.titles[3])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
10485
</div>
105-
</div>
106-
</div>
86+
</li>
87+
</ul>
10788
</div>
108-
</div>
109-
<div ng-if="widgetZones.titles && widgetZones.titles.length > 4">
110-
<h3>{{widgetZones.titles[4]}}</h3>
111-
<div droppable='widgetZones.list5' ng-move='moveObject(from, to, fromList, toList)'
112-
ng-create='createObject(object, to, list)' id="list5" class="sortable">
113-
<div ng-if="widgetZones.list5.length < 1" class="sortable-empty">Drag widget here</div>
114-
<div class="ui-state-default" ng-repeat="item in widgetZones.list5 track by item.Id">
115-
<div class="panel panel-primary">
116-
<div class="panel-body">
117-
{{ item.Title }}
118-
<div class="btn-group pull-right">
119-
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[4])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
120-
<button type="button" ng-click='deleteItem(item.Id, widgetZones.list5, widgetZones.titles[4])' class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
121-
</div>
89+
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 4">
90+
<h4>Widget Zone <span>({{widgetZones.titles[4]}})</span></h4>
91+
<ul class="sortable widgets-list widgets-list-active" droppable="widgetZones.list5" ng-move="moveObject(from, to, fromList, toList)" ng-create="createObject(object, to, list)" id="list5">
92+
<li ng-if="widgetZones.list5.length < 1" class="sortable-empty">Drag widget here</li>
93+
<li class="ui-state-default" ng-repeat="item in widgetZones.list5 track by item.Id">
94+
{{ item.Title }}
95+
<div class="item-buttons">
96+
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[4])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
97+
<button ng-click="deleteItem(item.Id, widgetZones.list5, widgetZones.titles[4])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
12298
</div>
123-
</div>
124-
</div>
99+
</li>
100+
</ul>
125101
</div>
126102
</div>
127103
</div>
128104
</div>
129-
<!--
130-
<h3>vm.WidgetZones</h3>
131-
<pre>{{ vm.WidgetZones | json }}</pre>
132-
-->
133105
</div>
134-
</div>
106+
</div>

‎BlogEngine/BlogEngine.NET/admin/themes/standard/css/styles.css‎

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

‎BlogEngine/BlogEngine.NET/admin/themes/standard/css/styles.css.map‎

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

‎BlogEngine/BlogEngine.NET/admin/themes/standard/sass/pages/custom/_widgets.scss‎

Lines changed: 79 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,100 @@
11
.custom-widgets-view {
2-
.red-border {
3-
border: 1px solid red !important;
2+
.modal-body{
3+
.input-group-btn {
4+
.btn {
5+
height: 40px;
6+
width: 140px;
7+
}
48
}
5-
6-
#w-zones .panel-body {
7-
padding: 10px 15px;
8-
line-height: 30px;
9+
iframe{
10+
height:400px;
11+
min-height:400px;
912
}
10-
11-
.panel-primary {
12-
margin-bottom: 5px;
13-
cursor: move;
1413
}
1514

16-
.modal .modal-body {
17-
height: auto;
18-
}
15+
.content-inner {
16+
.widgets-list {
17+
@include list-unstyled();
18+
margin-top: 20px;
19+
margin-bottom: 20px;
1920

20-
#settingsFrame {
21-
height: 100%;
22-
max-height: 500px;
23-
}
21+
li {
22+
width: 100%;
23+
background: #fff;
24+
margin-bottom: 5px;
25+
padding-left: 15px;
26+
line-height: 40px;
27+
border: 1px solid #ddd;
28+
-moz-box-shadow: 0 1px 0 #eee !important;
29+
-webkit-box-shadow: 0 1px 0 #eee !important;
30+
box-shadow: 0 1px 0 #eee !important;
31+
-moz-border-radius: 3px;
32+
-webkit-border-radius: 3px;
33+
border-radius: 3px;
34+
font-weight: 400;
35+
font-size: 14px;
36+
height: 40px;
37+
padding-left: 10px;
38+
color: #444;
39+
position: relative;
40+
overflow: hidden;
2441

25-
.header-txt {
26-
border: 1px solid #e5e5e5;
27-
line-height: 32px;
28-
margin-top: 10px 10px 0 0;
29-
width: 400px;
30-
padding: 0 10px;
31-
}
42+
&:last-child {
43+
margin-bottom: 0;
44+
}
3245

33-
.sortable-empty {
34-
border: 3px dashed #b4b9be;
35-
padding: 15px;
36-
}
46+
.item-buttons {
47+
position: absolute;
48+
right: 0;
49+
top: 0;
50+
z-index: 2;
51+
width: 100px;
3752

38-
.field-validation-error {
39-
background-color: #d9534f;
40-
border-color: #d9534f;
41-
color: #ffffff;
42-
padding: 5px 15px;
43-
display: block;
44-
}
53+
button {
54+
width: 50px;
55+
background-color: #fff;
56+
border: none;
57+
border: none;
58+
display: block;
59+
height: 100%;
60+
line-height: 38px;
61+
text-align: center;
62+
float: left;
63+
text-transform: uppercase;
64+
border-left: 1px solid #eee;
4565

46-
.content-inner {
47-
max-width: 1024px;
66+
i {
67+
display: block;
68+
height: 100%;
69+
line-height: 36px;
70+
}
4871

49-
.btn-group {
50-
.btn {
51-
margin: 0 !important;
72+
&:hover {
73+
background-color: #eee;
74+
}
75+
}
76+
}
5277
}
5378

54-
.btn-default {
55-
border-right: none;
79+
.sortable-empty {
80+
background: none;
81+
@include box-shadow(none !important);
82+
border: none;
83+
@include border-radius(0);
84+
text-align: center;
5685
}
5786
}
5887

59-
h3 {
60-
margin-bottom: 25px;
61-
}
62-
63-
.ui-draggable {
64-
width: 100%;
88+
.widgets-list-active {
89+
border: 1px dashed #aaa;
90+
padding: 10px;
6591
}
6692

67-
.ui-draggable-dragging {
68-
z-index: 10000;
93+
.ui-sortable-placeholder {
94+
visibility: visible !important;
95+
background: none !important;
96+
@include box-shadow(none !important);
97+
border: 1px dashed #aaa !important;
6998
}
7099
}
71100
}

0 commit comments

Comments
 (0)