3 files changed, 28 insertions, 11 deletions

diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.css b/js/components/ui/icon-list-basic/icon.reel/icon.css
index ca591aff..9fb180d2 100644
--- a/js/components/ui/icon-list-basic/icon.reel/icon.css
+++ b/js/components/ui/icon-list-basic/icon.reel/icon.css
@@ -5,38 +5,41 @@
  </copyright> */
 
 .icon{
-    width:90px;
-    height:80px;
+    width:88px;
+    height:78px;
     display: inline;
     float: left;
     -moz-border-radius: 8px;
     border-radius: 8px;
-    margin-bottom: 5px;
-    margin-right: 5px;
+    margin-bottom: 8px;
+    margin-right: 8px;
     background-color: #5f5f5f;
 }
 
 .icon .selected{
-    /*background-color: #d1d1d1;*/
     background-color: #919191;
 }
 
+/*highlight on hover*/
+.icon:hover{
+    background-color: #919191;
+}
+/*end- test*/
+
 .icon .iconImg{
     width:35px;
     height:35px;
-    /*border: 1px solid #000000;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);*/
-    margin-left: 20px;
+    margin-left: 26px;
     margin-top: 10px;
 }
 
 .icon .iconLabel{
     margin-top:8px;
     white-space: nowrap;
-    text-overflow:ellipsis;
+    text-overflow: ellipsis;
     line-height:15px;
     overflow: hidden;
-    max-width:80%;
+    width: 72px;
+    padding: 0px 8px;
     text-align: center;
-    padding-left: 2px;
 }
\ No newline at end of file
diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.html b/js/components/ui/icon-list-basic/icon.reel/icon.html
index fc197e8c..fc197e8c 100644..100755
--- a/js/components/ui/icon-list-basic/icon.reel/icon.html
+++ b/js/components/ui/icon-list-basic/icon.reel/icon.html
diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.js b/js/components/ui/icon-list-basic/icon.reel/icon.js
index d934e7f1..b0279207 100644..100755
--- a/js/components/ui/icon-list-basic/icon.reel/icon.js
+++ b/js/components/ui/icon-list-basic/icon.reel/icon.js
@@ -22,6 +22,13 @@ var Icon = exports.Icon = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
+
+    selectedUri:{
+        writable:true,
+        enumerable:true,
+        value:null
+    },
+
     metadata:{
         enumerable:true,
         writable:true,
@@ -83,6 +90,13 @@ var Icon = exports.Icon = Montage.create(Component, {
             if(this.icondata.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.icondata.creationDate);}
             if(this.icondata.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.icondata.modifiedDate);}
 
+            //show default selection
+            if(this.icondata.uri === this.selectedUri){
+                var selectedItemEvent = document.createEvent("Events");
+                selectedItemEvent.initEvent("selectedItem", false, false);
+                selectedItemEvent.uri = this.icondata.uri;
+                this.element.dispatchEvent(selectedItemEvent);
+            }
         }
     },