Added an edit action for the image

skybrud · Nov 7, 2018 · 98ecc6d · 98ecc6d
1 parent 90352e5
commit 98ecc6d
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 36 deletions.
diff --git a/src/Skybrud.ImagePicker/App_Plugins/Skybrud.ImagePicker/Styles/ImagePicker.css b/src/Skybrud.ImagePicker/App_Plugins/Skybrud.ImagePicker/Styles/ImagePicker.css
@@ -169,25 +169,40 @@
 .SkybrudImagePicker .image {
   position: relative;
 }
-.SkybrudImagePicker .image .remove {
+.SkybrudImagePicker .image .actions {
   position: absolute;
   bottom: 10px;
   right: 10px;
-  color: red;
-  background: white;
+  text-decoration: none;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  opacity: 0;
+  visibility: hidden;
+}
+.SkybrudImagePicker .image .action {
+  font-size: 16px;
+  background: #fff;
+  height: 25px;
+  width: 25px;
   border-radius: 15px;
-  text-align: center;
+  color: #1e1c1c;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-left: 5px;
   text-decoration: none;
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  font-size: 24px;
-  line-height: 36px;
-  opacity: 0.5;
-  display: none;
 }
-.SkybrudImagePicker .image:hover .remove {
-  display: block;
+.SkybrudImagePicker .image .action.-red {
+  color: red;
+}
+.SkybrudImagePicker .image:hover .actions {
+  visibility: visible;
+  opacity: 1;
 }
 .SkybrudImagePicker .single-tile .image {
   overflow: hidden;
@@ -357,20 +372,31 @@
   border: 0;
 }
 .SkybrudImagePicker.umbraco-gte76 .SkybrudImagePickerList .addItem {
-  color: #00aea2;
+  color: #00AEA2;
   font-weight: bold;
 }
 .SkybrudImagePicker.umbraco-gte76 .SkybrudImagePickerTiles .tile.tile-item {
   background: #F3F3F5;
   border: 1px solid #B3AFBD;
 }
 .SkybrudImagePicker.umbraco-gte76 .SkybrudImagePickerTiles .tile.tile-add {
-  color: #d8d7d9;
-  border: 2px dashed #d8d7d9;
+  color: #D8D7D9;
+  border: 2px dashed #D8D7D9;
 }
 .SkybrudImagePicker.umbraco-gte76 .SkybrudImagePickerTiles .tile.tile-add:hover {
-  color: #00aea2;
-  border-color: #03bfb3;
+  color: #00AEA2;
+  border-color: #03BFB3;
+}
+.SkybrudImagePicker.umbraco-gte76 .subpart input[type='text'],
+.SkybrudImagePicker.umbraco-gte76 .subpart textarea {
+  border-color: #D8D7D9;
+}
+.SkybrudImagePicker.umbraco-gte76 .subpart input[type='text']:hover,
+.SkybrudImagePicker.umbraco-gte76 .subpart textarea:hover {
+  border: 1px solid #BBBABF;
+}
+.SkybrudImagePicker.umbraco-gte76 .subpart .title {
+  border-bottom: 1px solid #B3AFBD;
 }
 .SkybrudImagePickerPreValues.umbraco-gte76 .optionGroup .optionGroupTitle {
   background: #F3F3F5;

diff --git a/src/Skybrud.ImagePicker/App_Plugins/Skybrud.ImagePicker/Styles/ImagePicker.less b/src/Skybrud.ImagePicker/App_Plugins/Skybrud.ImagePicker/Styles/ImagePicker.less
@@ -184,30 +184,49 @@
     }
 
     .image {
+
         position: relative;
 
-        .remove {
+        .actions {
             position: absolute;
             bottom: 10px;
             right: 10px;
-            color: red;
-            background: white;
+            text-decoration: none;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-direction: row;
+            flex-direction: row;
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        .action {
+            font-size: 16px;
+            background: #fff;
+            height: 25px;
+            width: 25px;
             border-radius: 15px;
-            text-align: center;
+            color: #1e1c1c;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -ms-flex-align: center;
+            align-items: center;
+            margin-left: 5px;
             text-decoration: none;
-            width: 32px;
-            height: 32px;
-            overflow: hidden;
-            font-size: 24px;
-            line-height: 36px;
-            opacity: 0.5;
-            display: none;
+
+            &.-red {
+                color: red;
+            }
         }
 
-        &:hover .remove {
-            display: block;
+        &:hover .actions {
+            visibility: visible;
+            opacity: 1;
+        }
+
         }
-    }
 
     .single-tile {
         .image {
@@ -486,8 +505,8 @@
                 color: @turquoise-d1;
                 border-color: @turquoise;
             }
-            }
         }
+    }
 
     .subpart input[type='text'],
     .subpart textarea {

diff --git a/src/Skybrud.ImagePicker/App_Plugins/Skybrud.ImagePicker/Styles/ImagePicker.min.css b/src/Skybrud.ImagePicker/App_Plugins/Skybrud.ImagePicker/Styles/ImagePicker.min.css