RTL version of Widgets improved.

Author: Farzin Seyfolahi

BlogEngine/BlogEngine.NET/App_Data/labels.txt

@@ -99,6 +99,7 @@ categoryDeleted
 categoryUpdated
 center
 changePassword
+changeName
 cheked
 chooseFromExistingTags
 chooseOtherName

BlogEngine/BlogEngine.NET/App_GlobalResources/labels.designer.cs

@@ -1993,4 +1993,7 @@
   <data name="txtErrorTitle" xml:space="preserve">
     <value>عنوان خطا</value>
   </data>
+  <data name="changeName" xml:space="preserve">
+    <value>تغییر نام</value>
+  </data>
 </root>

BlogEngine/BlogEngine.NET/App_GlobalResources/labels.fa.resx

@@ -2591,4 +2591,7 @@
   <data name="plugins" xml:space="preserve">
     <value>Plugins</value>
   </data>
+  <data name="changeName" xml:space="preserve">
+    <value>Change Name</value>
+  </data>
 </root>

BlogEngine/BlogEngine.NET/App_GlobalResources/labels.resx

@@ -46,19 +46,19 @@ <h4 class="modal-title">{{package.Title}}</h4>
     </div>
     <div class="main-header clearfix">
         <h2 class="page-title pull-left">{{lbl.gallery}}</h2>
-        <button type="button" class="btn btn-default btn-sm btn-hasicon pull-left" onclick="window.history.back()"><i class="fa fa-angle-left"></i>Back</button>
+        <button type="button" class="btn btn-default btn-sm btn-hasicon pull-left" onclick="window.history.back()"><i class="fa fa-angle-left"></i>{{lbl.back}}</button>
         <button class="right-side-toggle pull-right"><span></span><span></span><span></span></button>
         <div class="right-side pull-right">
             <div class="search pull-right">
                 <i class="fa fa-search"></i>
                 <input type="text" ng-model="query" ng-change="search()" placeholder="{{lbl.search}}..." />
             </div>
             <div class="dropdown pull-right">
-                <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Most downloaded<i class="fa fa-angle-down"></i></button>
+                <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">{{lbl.mostDownloaded}}<i class="fa fa-angle-down"></i></button>
                 <ul class="dropdown-menu dropdown-menu-filter">
-                    <li><a id="fltr-new" data-value="New" ng-click="sortBy('LastUpdated')">Latest</a></li>
-                    <li><a id="fltr-dwn" data-value="Downloads" ng-click="sortBy('DownloadCount')">Most downloaded</a></li>
-                    <li><a id="fltr-pop" data-value="Popular" ng-click="sortBy('Rating')">Highest rated</a></li>
+                    <li><a id="fltr-new" data-value="New" ng-click="sortBy('LastUpdated')">{{lbl.latest}}</a></li>
+                    <li><a id="fltr-dwn" data-value="Downloads" ng-click="sortBy('DownloadCount')">{{lbl.mostDownloaded}}</a></li>
+                    <li><a id="fltr-pop" data-value="Popular" ng-click="sortBy('Rating')">{{lbl.highestRated}}</a></li>
                 </ul>
             </div>
         </div>
@@ -78,7 +78,7 @@ <h2 class="page-title pull-left">{{lbl.gallery}}</h2>
                         <ul>
                             <li>{{item.Title}}</li>
                             <li>{{item.Authors}}</li>
-                            <li>{{item.DownloadCount}} Downloads</li>
+                            <li>{{item.DownloadCount}} {{lbl.download}}</li>
                             <li>
                                 <span class="star-rating">
                                     <input disabled="disabled" type="radio" name="{{item.Id}}" value="1" ng-checked="checkStar(1, item.Rating)"><i></i>

BlogEngine/BlogEngine.NET/admin/app/custom/widgets/widgetGallery.html

@@ -7,7 +7,7 @@
                     <div class="input-group">
                         <input type="text" class="form-control" id="txtWidgetTitle" name="txtWidgetTitle" value="" />
                         <div class="input-group-btn">
-                            <button type="button" class="btn btn-success" ng-click="updateTitle()">Change Name</button>
+                            <button type="button" class="btn btn-success" ng-click="updateTitle()">{{lbl.changeName}}</button>
                         </div>
                     </div>
                 </div>

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

@@ -12,6 +12,10 @@
                 display: none;
             }
 
+            .modal-header {
+                border: none;
+            }
+
             .modal-body {
                 display: none;
             }
@@ -94,6 +98,8 @@
             @include list-unstyled();
             margin-top: 20px;
             margin-bottom: 20px;
+            position: relative;
+            z-index: 11;
 
             li {
                 width: 100%;
@@ -102,19 +108,16 @@
                 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;
+                @include box-shadow(0 1px 0 #eee !important);
+                @include border-radius(3px);
                 font-weight: 400;
                 font-size: 14px;
                 height: 40px;
                 padding-left: 10px;
                 color: #444;
                 position: relative;
                 overflow: hidden;
+                cursor: move;
 
                 &:last-child {
                     margin-bottom: 0;
@@ -124,7 +127,7 @@
                     position: absolute;
                     right: 0;
                     top: 0;
-                    z-index: 2;
+                    z-index: 0;
                     width: 100px;
 
                     button {
@@ -165,6 +168,7 @@
         .widgets-list-active {
             border: 1px dashed #aaa;
             padding: 10px;
+            z-index: 10;
         }
 
         .ui-sortable-placeholder {
@@ -263,7 +267,7 @@
 
 
 // widget-edit
-// don't forget widget-edit is for body class.
+// don't forget widget-edit is for body class in the iframe setting of widgets.
 .widget-edit {
     padding: 15px;
     // blogrolll

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

@@ -27,3 +27,18 @@
         float: right;
     }
 }
+
+
+.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child > .btn-group:not(:first-child) > .btn, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}

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

@@ -27,6 +27,7 @@
     @import "rtl.settings";
     // custom section
     @import "rtl.plugins";
+    @import "rtl.widgets";
     // about section
     @import "rtl.about";
 

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

@@ -0,0 +1,45 @@
+.custom-widgets-view {
+    // modal public styles
+    .modal {
+        .modal-header {
+            padding-right: 20px;
+            padding-left: 50px;
+
+            .close {
+                left: 0;
+                right: auto;
+            }
+        }
+    }
+    // content-inner
+    .content-inner {
+        h4 {
+            direction: ltr;
+            text-align: right;
+        }
+
+        .widgets-list {
+            li {
+                padding-right: 15px;
+                padding-left: 10px;
+
+                .item-buttons {
+                    left: 0;
+                    right: auto;
+
+                    button {
+                        float: right;
+                        border-right: 1px solid #eee;
+                        border-left: none;
+                    }
+                }
+            }
+        }
+
+        .widget-zone-wrapper {
+            .widget-zone {
+                float: right;
+            }
+        }
+    }
+}