feat(ui-updates): ensure important gallery styles cannot be accidenta…

…lly override ...by bootstrap or fineuploader-new.css #1297
FineUploader · Mar 13, 2015 · 42eb2dd · 42eb2dd
1 parent 7af5ea7
commit 42eb2dd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/client/fineuploader-gallery.css b/client/fineuploader-gallery.css
@@ -8,6 +8,10 @@
 .qq-gallery .qq-btn
 {
     float: right;
+    border: none;
+    padding: 0;
+    margin: 0;
+    box-shadow: none;
 }
 
 /* Upload Button
@@ -97,6 +101,7 @@
     max-height: 450px;
     overflow-y: auto;
     clear: both;
+    box-shadow: none;
 }
 
 
@@ -129,6 +134,12 @@
 .qq-gallery .qq-upload-continue {
     display: inline;
 }
+.qq-gallery .qq-upload-retry:hover,
+.qq-gallery .qq-upload-delete:hover,
+.qq-gallery .qq-upload-pause:hover,
+.qq-gallery .qq-upload-continue:hover {
+    background-color: transparent;
+}
 .qq-gallery .qq-upload-delete,
 .qq-gallery .qq-upload-pause,
 .qq-gallery .qq-upload-continue,
@@ -144,12 +155,6 @@
     font-size: 12px;
     padding: 0;
 }
-.qq-gallery ,qq-upload-delete:hover,
-.qq-gallery .qq-upload-pause:hover,
-.qq-gallery .qq-upload-continue:hover {
-    text-decoration: underline;
-}
-
 /* to ensure consistent size of tiles - only display status text before auto-retry or after failure */
 .qq-gallery .qq-upload-status-text {
     color: #333333;
@@ -185,6 +190,11 @@
     position: absolute;
     right: -5px;
     top: -6px;
+    margin: 0;
+    line-height: 17px;
+}
+.qq-gallery .qq-upload-cancel:hover {
+    background-color: #525252;
 }
 .qq-gallery .qq-upload-retry {
     cursor: pointer;
@@ -223,6 +233,7 @@
     display: block;
     margin-right: 0;
     margin-bottom: 3px;
+    width: auto;
 
     /* to ensure consistent size of tiles - constrain text to single line */
     text-overflow: ellipsis;
@@ -299,6 +310,7 @@
     font-size: 11px;
     color: #929292;
     margin-bottom: 3px;
+    margin-right: 0;
     display: inline-block;
 }
 

diff --git a/client/html/templates/gallery.html b/client/html/templates/gallery.html
@@ -47,7 +47,7 @@
                     <div class="qq-file-info">
                         <div class="qq-file-name">
                             <span class="qq-upload-file-selector qq-upload-file"></span>
-                            <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
+                            <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                         </div>
                         <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                         <span class="qq-upload-size-selector qq-upload-size"></span>

diff --git a/test/dev/index.html b/test/dev/index.html
@@ -36,7 +36,7 @@
                         <div class="qq-file-info">
                             <div class="qq-file-name">
                                 <span class="qq-upload-file-selector qq-upload-file"></span>
-                                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
+                                <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                             </div>
                             <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                             <span class="qq-upload-size-selector qq-upload-size"></span>
@@ -202,9 +202,9 @@
         <title>Fine Uploader Development</title>
         <meta charset="utf-8" />
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-        <!--<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>-->
+        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
         <link href="../../client/fineuploader-gallery.css" rel="stylesheet" type="text/css"/>
-        <!--<link href="../../client/fineuploader-new.css" rel="stylesheet" type="text/css"/>-->
+        <link href="../../client/fineuploader-new.css" rel="stylesheet" type="text/css"/>
         <!--<link href="../../client/fineuploader.css" rel="stylesheet" type="text/css"/>-->
         <link href="styles.css" rel="stylesheet" type="text/css"/>
         <script src="../../_build/all.fine-uploader.js"></script>