Skip to content

Commit

Permalink
Widgets Styles improved.
Browse files Browse the repository at this point in the history
  • Loading branch information
Farzin Seyfolahi committed Mar 16, 2016
1 parent d37be24 commit ba92cab
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 150 deletions.
168 changes: 70 additions & 98 deletions BlogEngine/BlogEngine.NET/admin/app/custom/widgets/widgetView.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,127 +8,99 @@ <h4 class="modal-title">{{lbl.edit}} {{lbl.widgets}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="header-txt" id="txtWidgetTitle" name="txtWidgetTitle" value="xxx" />
<button type="button" class="btn btn-success btn-sm" ng-click="updateTitle()">{{lbl.save}}</button>
<div class="input-group">
<input type="text" class="form-control" id="txtWidgetTitle" name="txtWidgetTitle" value="xxx" />
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="updateTitle()">Change Name</button>
</div>
</div>
</div>
<hr />
<iframe id="settingsFrame" ng-src="{{editSrc}}"></iframe>
</div>
</div>
</div>
</div>
<div class="main-header clearfix">
<h2 class="page-title pull-left">{{lbl.widgets}}</h2>
<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>
<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>
</div>
<div class="content-inner">
<div class="row">
<div class="col-lg-6">
<h3>Available Widgets</h3>
<div class='unstyled-list'>
<div class="draggable" ng-repeat='iw in vm.AvailableWidgets' draggable="iw" draggable-target='.sortable'>
<div class="panel panel-primary">
<div class="panel-body">{{ iw.Title }}</div>
</div>
</div>
</div>
<div class="col-sm-2">
<h4>Available Widgets</h4>
<ul class="widgets-list">
<li class="draggable" ng-repeat="iw in vm.AvailableWidgets" draggable="iw" draggable-target=".sortable">{{ iw.Title }}</li>
</ul>
</div>
<div class="col-lg-6" id="w-zones">
<div ng-if="widgetZones.titles && widgetZones.titles.length > 0">
<h3>{{widgetZones.titles[0]}}</h3>
<div droppable='widgetZones.list1' ng-move='moveObject(from, to, fromList, toList)'
ng-create='createObject(object, to, list)' id="list1" class="sortable">
<div ng-if="widgetZones.list1.length < 1" class="sortable-empty">Drag widget here</div>
<div class="ui-state-default" ng-repeat="item in widgetZones.list1 track by item.Id">
<div class="panel panel-primary">
<div class="panel-body">
{{item.Title}}
<div class="btn-group pull-right">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[0])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
<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>
</div>
<div class="col-sm-10" id="w-zones">
<div class="row">
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 0">
<h4>Widget Zone <span>({{widgetZones.titles[0]}})</span></h4>
<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">
<li ng-if="widgetZones.list1.length < 1" class="sortable-empty">Drag widget here</li>
<li class="ui-state-default" ng-repeat="item in widgetZones.list1 track by item.Id">
{{item.Title}}
<div class="item-buttons">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[0])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
<button ng-click="deleteItem(item.Id, widgetZones.list1, widgetZones.titles[0])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div ng-if="widgetZones.titles && widgetZones.titles.length > 1">
<h3>{{widgetZones.titles[1]}}</h3>
<div droppable='widgetZones.list2' ng-move='moveObject(from, to, fromList, toList)'
ng-create='createObject(object, to, list)' id="list2" class="sortable">
<div ng-if="widgetZones.list2.length < 1" class="sortable-empty">Drag widget here</div>
<div class="ui-state-default" ng-repeat="item in widgetZones.list2 track by item.Id">
<div class="panel panel-primary">
<div class="panel-body">
{{ item.Title }}
<div class="btn-group pull-right">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[1])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
<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>
</div>
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 1">
<h4>Widget Zone <span>({{widgetZones.titles[1]}})</span></h4>
<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">
<li ng-if="widgetZones.list2.length < 1" class="sortable-empty">Drag widget here</li>
<li class="ui-state-default" ng-repeat="item in widgetZones.list2 track by item.Id">
{{ item.Title }}
<div class="item-buttons">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[1])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
<button ng-click="deleteItem(item.Id, widgetZones.list2, widgetZones.titles[1])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div ng-if="widgetZones.titles && widgetZones.titles.length > 2">
<h3>{{widgetZones.titles[2]}}</h3>
<div droppable='widgetZones.list3' ng-move='moveObject(from, to, fromList, toList)'
ng-create='createObject(object, to, list)' id="list3" class="sortable">
<div ng-if="widgetZones.list3.length < 1" class="sortable-empty">Drag widget here</div>
<div class="ui-state-default" ng-repeat="item in widgetZones.list3 track by item.Id">
<div class="panel panel-primary">
<div class="panel-body">
{{ item.Title }}
<div class="btn-group pull-right">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[2])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
<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>
</div>
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 2">
<h4>Widget Zone <span>({{widgetZones.titles[2]}})</span></h4>
<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">
<li ng-if="widgetZones.list3.length < 1" class="sortable-empty">Drag widget here</li>
<li class="ui-state-default" ng-repeat="item in widgetZones.list3 track by item.Id">
{{ item.Title }}
<div class="item-buttons">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[2])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
<button ng-click="deleteItem(item.Id, widgetZones.list3, widgetZones.titles[2])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div ng-if="widgetZones.titles && widgetZones.titles.length > 3">
<h3>{{widgetZones.titles[3]}}</h3>
<div droppable='widgetZones.list4' ng-move='moveObject(from, to, fromList, toList)'
ng-create='createObject(object, to, list)' id="list4" class="sortable">
<div ng-if="widgetZones.list4.length < 1" class="sortable-empty">Drag widget here</div>
<div class="ui-state-default" ng-repeat="item in widgetZones.list4 track by item.Id">
<div class="panel panel-primary">
<div class="panel-body">
{{ item.Title }}
<div class="btn-group pull-right">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[3])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
<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>
</div>
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 3">
<h4>Widget Zone <span>({{widgetZones.titles[3]}})</span></h4>
<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">
<li ng-if="widgetZones.list4.length < 1" class="sortable-empty">Drag widget here</li>
<li class="ui-state-default" ng-repeat="item in widgetZones.list4 track by item.Id">
{{ item.Title }}
<div class="item-buttons">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[3])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
<button ng-click="deleteItem(item.Id, widgetZones.list4, widgetZones.titles[3])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div ng-if="widgetZones.titles && widgetZones.titles.length > 4">
<h3>{{widgetZones.titles[4]}}</h3>
<div droppable='widgetZones.list5' ng-move='moveObject(from, to, fromList, toList)'
ng-create='createObject(object, to, list)' id="list5" class="sortable">
<div ng-if="widgetZones.list5.length < 1" class="sortable-empty">Drag widget here</div>
<div class="ui-state-default" ng-repeat="item in widgetZones.list5 track by item.Id">
<div class="panel panel-primary">
<div class="panel-body">
{{ item.Title }}
<div class="btn-group pull-right">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[4])" class="btn btn-default btn-sm" type="button">{{lbl.edit}}</button>
<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>
</div>
<div class="col-sm-4" ng-if="widgetZones.titles && widgetZones.titles.length > 4">
<h4>Widget Zone <span>({{widgetZones.titles[4]}})</span></h4>
<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">
<li ng-if="widgetZones.list5.length < 1" class="sortable-empty">Drag widget here</li>
<li class="ui-state-default" ng-repeat="item in widgetZones.list5 track by item.Id">
{{ item.Title }}
<div class="item-buttons">
<button ng-click="loadEditForm(item.Id, item.Name, item.Title, widgetZones.titles[4])" title="{{lbl.edit}}"><i class="fa fa-pencil"></i></button>
<button ng-click="deleteItem(item.Id, widgetZones.list5, widgetZones.titles[4])" title="{{lbl.remove}}"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--
<h3>vm.WidgetZones</h3>
<pre>{{ vm.WidgetZones | json }}</pre>
-->
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion BlogEngine/BlogEngine.NET/admin/themes/standard/css/styles.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion BlogEngine/BlogEngine.NET/admin/themes/standard/css/styles.css.map
View file

Large diffs are not rendered by default.

129 changes: 79 additions & 50 deletions BlogEngine/BlogEngine.NET/admin/themes/standard/sass/pages/custom/_widgets.scss
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,100 @@
.custom-widgets-view {
.red-border {
border: 1px solid red !important;
.modal-body{
.input-group-btn {
.btn {
height: 40px;
width: 140px;
}
}

#w-zones .panel-body {
padding: 10px 15px;
line-height: 30px;
iframe{
height:400px;
min-height:400px;
}

.panel-primary {
margin-bottom: 5px;
cursor: move;
}

.modal .modal-body {
height: auto;
}
.content-inner {
.widgets-list {
@include list-unstyled();
margin-top: 20px;
margin-bottom: 20px;

#settingsFrame {
height: 100%;
max-height: 500px;
}
li {
width: 100%;
background: #fff;
margin-bottom: 5px;
padding-left: 15px;
line-height: 40px;
border: 1px solid #ddd;
-moz-box-shadow: 0 1px 0 #eee !important;
-webkit-box-shadow: 0 1px 0 #eee !important;
box-shadow: 0 1px 0 #eee !important;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-weight: 400;
font-size: 14px;
height: 40px;
padding-left: 10px;
color: #444;
position: relative;
overflow: hidden;

.header-txt {
border: 1px solid #e5e5e5;
line-height: 32px;
margin-top: 10px 10px 0 0;
width: 400px;
padding: 0 10px;
}
&:last-child {
margin-bottom: 0;
}

.sortable-empty {
border: 3px dashed #b4b9be;
padding: 15px;
}
.item-buttons {
position: absolute;
right: 0;
top: 0;
z-index: 2;
width: 100px;

.field-validation-error {
background-color: #d9534f;
border-color: #d9534f;
color: #ffffff;
padding: 5px 15px;
display: block;
}
button {
width: 50px;
background-color: #fff;
border: none;
border: none;
display: block;
height: 100%;
line-height: 38px;
text-align: center;
float: left;
text-transform: uppercase;
border-left: 1px solid #eee;

.content-inner {
max-width: 1024px;
i {
display: block;
height: 100%;
line-height: 36px;
}

.btn-group {
.btn {
margin: 0 !important;
&:hover {
background-color: #eee;
}
}
}
}

.btn-default {
border-right: none;
.sortable-empty {
background: none;
@include box-shadow(none !important);
border: none;
@include border-radius(0);
text-align: center;
}
}

h3 {
margin-bottom: 25px;
}

.ui-draggable {
width: 100%;
.widgets-list-active {
border: 1px dashed #aaa;
padding: 10px;
}

.ui-draggable-dragging {
z-index: 10000;
.ui-sortable-placeholder {
visibility: visible !important;
background: none !important;
@include box-shadow(none !important);
border: 1px dashed #aaa !important;
}
}
}

0 comments on commit ba92cab

Please sign in to comment.