Added update button to the item UI

skybrud · Nov 1, 2018 · ed9f40e · ed9f40e
1 parent c798fbf
commit ed9f40e
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Scripts/Directives/Videos.js b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Scripts/Directives/Videos.js
@@ -246,6 +246,8 @@
                     return;
                 }
 
+                item.loading = true;
+
                 $http.get('/umbraco/Skybrud/VideoPicker/GetVideoFromUrl?url=' + item.url).success(function (video) {
 
                     if (video.type === "youtube" && scope.config.services.youtube === false) {
@@ -278,8 +280,12 @@
 
                     }
 
+                    item.loading = false;
+
                 }).error(function (r) {
 
+                    item.loading = false;
+
                     item.type = null;
                     item.details = null;
 

diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.css b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.css
@@ -23,6 +23,15 @@
   border: 1px dashed #d8d7d9;
   padding: 10px;
   margin-bottom: 10px;
+  position: relative;
+}
+.SkybrudVideoPicker .SkybrudVideoPickerItem.loading > .load-indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.75);
 }
 .SkybrudVideoPicker input[type=text] {
   box-sizing: border-box;

diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.less b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.less
@@ -25,6 +25,15 @@
         border: 1px dashed #d8d7d9;
         padding: 10px;
         margin-bottom: 10px;
+        position: relative;
+        &.loading > .load-indicator {
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            background: rgba(255,255,255, 0.75);
+        }
     }
 
     input[type=text] {

diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.min.css b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.min.css
diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Views/VideosDirective.html b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Views/VideosDirective.html
@@ -1,8 +1,11 @@
 <div class="SkybrudVideoPicker" ng-class="{SingleVideoPicker: config.list.limit == 1, MultiVideoPicker: config.list.limit != 1, 'umbraco-gte76': umbVersion >= 7.06}">
     <div>
-        <div class="SkybrudVideoPickerItem videopicker-{{item.type}}" ng-repeat="item in shadowValue.items">
+        <div class="SkybrudVideoPickerItem videopicker-{{item.type}}" ng-repeat="item in shadowValue.items" ng-class="{loading: item.loading}">
             <div style="display: flex;">
                 <input type="text" ng-model="item.url" ng-change="urlChanged(item)" placeholder="Enter the URL of the video here..." />
+                <a href="#" prevent-default class="btn btn-default" ng-click="urlChanged(item)" style="border-radius: 3px; margin-left: 10px; line-height: 18px;">
+                    <i class="icon icon-refresh"></i>
+                </a>
                 <div class="actions" ng-if="config.list.limit != 1">
                     <a href="#" ng-click="removeItem($index);" prevent-default>
                         <i class="icon icon-delete red"></i>
@@ -67,6 +70,9 @@
                     </div>
                 </div>
             </div>
+            <div class="load-indicator">
+                <umb-load-indicator ng-show="item.loading"></umb-load-indicator>
+            </div>
         </div>
         <div>
             <a class="videopicker-add-link" href="#" prevent-default ng-click="addVideo()" ng-show="config.list.limit == 0 || config.list.limit > shadowValue.items.length">