Changeset 1442

Timestamp:

03/08/08 15:52:07 (9 months ago)

Author:

Heilemann

Message:

Updated and refined the silo UI. Not entirely done yet.

Location:

branches/monolith/system/admin

Files:

• css/admin.css (modified) (3 diffs)
• js/media.js (modified) (7 diffs)
• publish.php (modified) (1 diff)

branches/monolith/system/admin/css/admin.css

@@ -1 @@
-/* @override 
-    http://localhost/monolith/system/admin/css/admin.css
-*/
+/* @override http://localhost/monolith/system/admin/css/admin.css */
 
 /*
@@ -484 +482 @@
     }
 
-/* Media */
-
-.media {
-    display: inline;
-    float: left;
-    height: 180px;
-    font-size: 0.9em;
-}
-
-.media img {
-    margin:0px 0px -3px;
-    height:100px;
-    border-top: 1px solid white;
-    border-right: 1px solid white;
+
+/* MEDIA SILOS */
+
+.mediasplitter {
     border-bottom: 1px solid white;
-    cursor: pointer;
-}
-
-.media.first img {
-    border-left: 1px solid white;
-}
-
-.media .foroutput {
-    display: none;
-}
+    }
 
 .mediasplitter .splitterinside {
     padding: 13px 0px 0px;
     color: #848484;
-}
-
-.mediatitle {
-    padding: 3px;
-    height: 30px;
-    background: #333333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAA8CAMAAAB/yBzfAAAAA3NCSVQICAjb4U/gAAAAb1BMVEU7Ozs6Ojo5OTk1NTU0NDQyNDEzMzMyMzUyMjIxMzIxMTEwMDAvLy8uLi4tLS0sLCwrKysqKiopKSkoKCgnJycmJiYlJSUkJCQjIyMiIiIhISEgICAfHx8eHh4dHR0cHBwbGxsaGhoZGRkYGBgXFxeooJonAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3NPsx9OAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzEyLzA4IRiF3QAAAP5JREFUeJzt00kOgkAAAMFRE2MgCi64oOLG/98og7icPE760PWFToeLkrtGt949egzatj2FnZLbdw5RXdfHznnQNM0qLJXaKlq/bbdDol4e5kpt8SMG6qpselVVTcJMqWVR/hKjlGX5WWccpkrtWyXL4jFFUZRvI4Ok9y9IMEh6BoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwC8zfIE1yTu6lWZRyRAAAAAElFTkSuQmCC) top right; /* Drop shadow */
-}
-
-.mediastats {
-    padding: 3px;
-    height: 42px;
-    background: #333333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAA8CAMAAAB/yBzfAAAAA3NCSVQICAjb4U/gAAAAb1BMVEU7Ozs6Ojo5OTk1NTU0NDQyNDEzMzMyMzUyMjIxMzIxMTEwMDAvLy8uLi4tLS0sLCwrKysqKiopKSkoKCgnJycmJiYlJSUkJCQjIyMiIiIhISEgICAfHx8eHh4dHR0cHBwbGxsaGhoZGRkYGBgXFxeooJonAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3NPsx9OAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzEyLzA4IRiF3QAAAP5JREFUeJzt00kOgkAAAMFRE2MgCi64oOLG/98og7icPE760PWFToeLkrtGt949egzatj2FnZLbdw5RXdfHznnQNM0qLJXaKlq/bbdDol4e5kpt8SMG6qpselVVTcJMqWVR/hKjlGX5WWccpkrtWyXL4jFFUZRvI4Ok9y9IMEh6BoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwCYxAYg8AYBMYgMAaBMQiMQWAMAmMQGIPAGATGIDAGgTEIjEFgDAJjEBiDwBgExiAwBoExCIxBYAwC8zfIE1yTu6lWZRyRAAAAAElFTkSuQmCC) top right; /* Drop shadow */
-}
-
-.splitter.mediasplitter {
-    background: #333333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAuCAIAAAB8sQSzAAAAW0lEQVR4nO3VMRIAIQhD0WUF9BDW3v+CDl7hFymhfpMiRbBzzgfOIwK5zJS6OSdyay1pHnW0F+rcHbkxhtSZmdL9BLVr107ivKqk7t6rdLb3Rnl0x+n/oHsK3QNrcA5DpDiz3gAAAABJRU5ErkJggg==) top repeat-x; /* Drop shadow */
-
-}
+    padding: 0;
+    background: #262626;
+    }
+
+.mediasplitter td {
+    padding: 0;
+    }
+
+/* -- TOOLBAR */
 
 .media_controls {
-    height: 28px;
-    text-align: center;
+    background: #474747 url('../images/shadow-heavy-top.png') top repeat-x;
+    padding: 15px 5px 5px;
+    height: 25px;
 }
 
@@ -551 +522 @@
 }
 
-.media_browser td {
-    padding: 0px;
-    border: 0px;
+.media_controls input[type=search] {
+    width: 270px;
+    margin-left: 5px;
+    }
+
+/* -- MEDIABROWSER */
+
+.media_browser {
+    height: 195px;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    position: relative;
+    background: url('../images/shadow-light-top.png') top right repeat-x; /* Drop shadow */
+    }
+
+/* -- DIRECTORIES */
+
+.media_dirlevel {
+    float: left;
+    height: inherit;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: url('../images/shadow-light-left.png') repeat-y;
+    height: 180px;
 }
 
-.mediadir {
-    height:180px;
-    float:left;
-}
-
-.mediadir a {
-    color:#a6a6a6;
-    padding: 0px 20px 0px 5px;
-    background: transparent url(../images/media_arrow.png) scroll no-repeat center right;
-    outline: none;
-    display: block;
-    margin-right: 1px;
-    text-decoration: none;
+.media_dirlevel ul {
+    max-width: 250px;
+    list-style-position: outside;
+    list-style-type: none;
+    }
+
+.media_dirlevel:first-child {
+    background: #262626;
+    }
+    
+.media_dirlevel li {
+    min-width: 70px;
+    background: url(../images/arrowright.png) right center no-repeat;
+    cursor: pointer;
+    color: #888;
+    padding: 0px 15px 0px 10px;
+    font: 11px/20px 'Helvetica Neue Light', 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, Sans-Serif !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    }
+
+.media_dirlevel li:first-child {
+    margin-top: 1px;
+    }
+
+.media_dirlevel li:hover, .media_dirlevel li.active {
+    background: #333 url(../images/arrowright.png) right center no-repeat;
+    }
+
+.media_dirlevel li.active {
+    color: white;
+    }
+
+/* -- MEDIA LISTING */
+
+.mediaphotos {
+    display: table;
+    }
+
+.mediaphotos ul {
+    display: table-row;
+    }
+
+.mediaphotos ul li {
+    display: table-cell;
+    }
+
+.mediaphotos .media {
+    position: relative;
+    display: inline;
+    float: left;
+    height: inherit;
+    font-size: 0.9em;
+    }
+
+.mediaphotos .media.first div {
+    background:  url('../images/shadow-light-left.png') left  repeat-y;
+    }
+
+.media .foroutput {
+    display: none;
+    }
+
+.media > div {
+    border-right: 1px solid #333;
+    }
+
+.mediatitle {
+    padding: 0 5px;
+    line-height: 35px;
     white-space: nowrap;
     overflow: hidden;
-}
-
-.mediadir a.active {
-    background-color: #5B5B5B;
-    background: #5B5B5B url(../images/media_arrow_active.png) scroll no-repeat center right;
-    color: #e8e8e8;
-}
-
-.media_dirlevel {
-    float: left;
-    height: 197px;
-    overflow-y: auto;
-}
-
-.media_panel {
-    height: 197px;
-    display: none;
-}
-
-
-
+    text-overflow: ellipsis;
+    }
+
+.mediacontent {
+    background: red url('../images/silo-mediabg.png');
+    }
+
+.media img {
+    margin: 0 0 -3px;
+    height: 100px;
+    border: 1px solid white;
+    border-left: none;
+    cursor: pointer;
+    max-width: 300px;
+    min-width: 20px;
+    }
+
+.media.first img {
+    border-left: 1px solid white;
+    }
+
+.mediastats {
+    padding: 3px;
+    height: 42px;
+    }
 
 /* DASHBOARD */

branches/monolith/system/admin/js/media.js

@@ -4 +4 @@
         $('.media_browser', container).show();
         $('.media_panel', container).hide();
-        if(!el && !container) {
+
+        if (!el && !container)
             container = $('.mediasplitter:visible');
-        }
-        if(el && !container) {
+
+        if (el && !container)
             container = $(el).parents('.mediasplitter');
-        }
-        if($('.pathstore', container).html() != path || $('.pathstore.toload', container).size()) {
+
+        if ($('.pathstore', container).html() != path || $('.pathstore.toload', container).size()) {
             $.post(
                 habari.url.habari + '/admin_ajax/media',
@@ -17 +18 @@
                 },
                 function(result) {
+                    var mediaDirChildren = $('.mediadir').children().length;
+
                     habari.media.unqueueLoad();
                     $('.pathstore', container).html(result.path);
-                    var output = '<div class="media_dirlevel"><table>';
-                    for(var dir in result.dirs) {
-                        output += '<tr><td><a class="directory" href="#" onclick="return habari.media.clickdir(this, \'' + result.dirs[dir].path + '\');">' + result.dirs[dir].title + '</a></td></tr>';
+                    var output = '<li class="media_dirlevel"><ul>';
+
+                    // Build path
+                    for (var dir in result.dirs) {
+                        output += '<li onclick="return habari.media.clickdir(this, \'' + result.dirs[dir].path + '\');" class="directory">' + result.dirs[dir].title + '</li>';
                     }
-                    output += '</table></div>';
-                    if(el) {
+
+                    output += '</ul></li>';
+
+                    // If path changed
+                    if (el) {
                         $($(el).parents('.media_dirlevel')).nextAll().remove();
-                        $('.directory', $(el).parents('.media_dirlevel')).removeClass('active');
+                        $(el).siblings().removeClass('active')
                         $(el).addClass('active');
                         $(el).parents('.media_dirlevel').after(output);
-                    }
-                    else if($('.mediadir', container).html() == '') {
+                    } else if ($('.mediadir', container).html() == '') {
                         $('.mediadir', container).html(output);
                     }
-                    output = '<table><tr>';
+
+                    // Build Media List
+                    output = '<ul>';
                     var first = ' first';
                     habari.media.assets = result.files;
-                    for(var file in result.files) {
+
+                    for (var file in result.files) {
                         stats = '';
-                        output += '<td><div class="media' + first + '"><span class="foroutput">' + file + '</span>';
+                        output += '<li><div class="media' + first + '"><span class="foroutput">' + file + '</span>';
 
-                        if(result.files[file].filetype && habari.media.preview[result.files[file].filetype]) {
+                        if (result.files[file].filetype && habari.media.preview[result.files[file].filetype]) {
                             output += habari.media.preview[result.files[file].filetype](file, result.files[file]);
                         }
@@ -47 +57 @@
                         }
 
-                        output += '</div></td>';
+                        output += '</div></li>';
                         first = '';
                     }
-                    output += '</tr></table>';
+
+                    output += '</ul>';
+
                     $('.mediaphotos', container).html(output);
                     $('.media').dblclick(function(){
@@ -57 +69 @@
                     $('.media_controls ul li:first', container).nextAll().remove();
                     $('.media_controls ul li:first', container).after(result.controls);
+                    
+                    // Open the first directory automatically
+                    if (mediaDirChildren == 0)
+                        $('.media_dirlevel:first-child li:first-child').click()
                 },
                 'json'
@@ -102 +118 @@
         image: function(fileindex, fileobj) {
             var stats = '';
-            return '<div class="mediatitle">' + fileobj.title + '</div><img src="' + fileobj.thumbnail_url + '"><div class="mediastats"> ' + stats + '</div>';
+            return '<div class="mediatitle">test' + fileobj.title + '</div><div class="mediacontent"><img src="' + fileobj.thumbnail_url + '"></div><div class="mediastats">qwerqr123 ' + stats + '</div>';
         }
     },
@@ -118 +134 @@
     insertAsset: function(asset) {
         var id = $('.foroutput', asset).html();
-        if(this.assets[id].filetype && habari.media.output[this.assets[id].filetype]) {
+        if (this.assets[id].filetype && habari.media.output[this.assets[id].filetype]) {
             habari.media.output[this.assets[id].filetype](id, this.assets[id]);
         }
@@ -135 +151 @@
         show: function(clicked, shown, hidden){
             var path = $('.pathstore', shown).html().trim();
-            if(path != '') {
+            if (path != '') {
                 habari.media.showdir(path, null, shown);
                 habari.media.unqueueLoad();

branches/monolith/system/admin/publish.php

@@ -38 +38 @@
                 <div class="toload pathstore" style="display:none;"><?php echo $silodir->path; ?></div>
                 <div class="splitterinside">
-                    <div class="media_controls"><ul><li><a href="#" onclick="habari.media.showdir('<?php echo $silodir->path; ?>');return false;">Root</a></li></ul></div>
-                    <div style="white-space:nowrap;overflow-x:scroll;overflow-y:hidden;" class="media_browser">
-                        <div class="mediadir"></div>
+                    <div class="media_controls"><ul>
+                        <li><input type="search" placeholder="Search descriptions, names and tags" autosave="habarisettings" results="10"></input></li>
+                        <li><a href="#" onclick="habari.media.showdir('<?php echo $silodir->path; ?>');return false;">Root</a></li>
+                    </ul></div>
+                    <div class="media_browser">
+                        <ul class="mediadir"></ul>
                         <div class="mediaphotos"></div>
                     </div>