GitBlixt
teagles/comfortable-mexican-sofa

adjustments for file dialog

Oleg committed Dec 14, 2011
commit 142efe1a9274b0a3c1262ffd8a6d7fe914a50487
Showing 3 changed files with 28 additions and 124 deletions
app/assets/javascripts/comfortable_mexican_sofa/elrte/elrte.sofa_image.js +1 -1
@@ @@ -15,7 +15,7 @@
});
// attaching event handlers to images
- $(document).on('click', '#cms_dialog .uploaded_files img', function(){
+ $(document).on('click', '#cms_dialog .uploaded_files .file_info', function(){
self.img_src = $(this).data('url');
self.set();
return false;
app/assets/stylesheets/comfortable_mexican_sofa/files.css +25 -121
@@ @@ -17,6 +17,7 @@
overflow: auto;
}
#cms_body .uploaded_files .file {
+ overflow: hidden;
}
#cms_body .uploaded_files .file .file_name {
background-color: #252525;
@@ @@ -54,6 +55,7 @@
font: 11px/18px Arial, sans-serif;
background-color: #484848;
border: 1px solid #252525;
+ border-top: 0px;
padding: 2px;
}
#cms_body .uploaded_files .file:hover .file_info {
@@ @@ -70,6 +72,7 @@
}
#cms_body .uploaded_files .file .file_info .details {
margin-left: 85px;
+ color: #eee;
}
#cms_body .uploaded_files .file .file_info .details input {
border: 0px;
@@ @@ -78,137 +81,39 @@
margin-bottom: 3px;
}
-
-
-
- /*
-
-
- #cms_body .file_uploads .file a.delete {
- float: right;
- height: 11px;
- width: 11px;
- background: url(/assets/comfortable_mexican_sofa/x.png);
- }
- #cms_body .file_uploads .file a.delete:hover {
- background-position: 0px 11px;
- }
- #cms_body .file_uploads .file a.delete span {
- display: none;
- }
-
- #cms_body .file_uploads .file_info {
- background-color: #e6e6e6;
- }
-
-
- #cms_body .file_uploads .file .thumb {
- border: 1px solid #bbb;
- border-radius: 3px;
- margin-bottom: 2px;
- }
- #cms_body .file_uploads .file .thumb img {
- display: block;
- height: 100px;
- width: 133px;
- border-radius: 3px;
- }
- #cms_body .file_uploads .file .thumb input {
- width: 133px;
- border: 1px solid #bbb;
- font-size: 10px;
- color: #252525;
- opacity: 0.2;
- }
- #cms_body .file_uploads .file .thumb:hover input {
- opacity: 1;
- }
- #cms_body .uploaded_files {
- max-height: 500px;
- overflow: auto;
- }
-
- */
-
- /* -- Right Column Widget ------------------------------------------------ */
-
- /*
- #cms_body .right_column_content .file_uploads {
- position: relative;
- }
- #cms_body .right_column_content .file_uploads .file {
- background-color: #252525;
- font: 11px/11px Arial, sans-serif;
- height: 11px;
- padding: 3px 5px;
- border-bottom: 1px solid #484848;
- border-radius: 2px;
- }
-
-
- #cms_body .right_column_content .file_uploads .file a.filename {
- color: #f1f1f1;
+ /* -- Dialog ------------------------------------------------------------- */
+ #cms_body #cms_dialog .uploaded_files .file {
+ width: 185px;
float: left;
- width: 180px;
- white-space: nowrap;
- overflow: hidden;
- }
- #cms_body .right_column_content .file_uploads .file .file_container {
- display: none;
- position: absolute;
- top: 30px;
- left: -142px;
- z-index: 9999;
- height: 500px;
+ margin: 0px 5px 5px 0px;
}
- #cms_body .right_column_content .file_uploads .file .thumb {
- padding: 5px;
- background-color: #e6e6e6;
- border: 1px solid #bbb;
- border-radius: 3px;
+ #cms_body #cms_dialog .uploaded_files .file .file_name {
+ border-radius: 0px;
+ background-color: #ccc;
+ border-top: 0px;
}
- #cms_body .right_column_content .file_uploads .file:hover {
- background-color: #000;
+ #cms_body #cms_dialog .uploaded_files .file .file_name a.filename {
+ color: #252525;
+ width: 155px;
}
- #cms_body .right_column_content .file_uploads .file:hover .file_container {
+ #cms_body #cms_dialog .uploaded_files .file .file_info {
+ background-color: #eee;
+ border-color: #ccc;
display: block;
}
-
- */
- /* -- Dialog Widget ------------------------------------------------------ */
-
- /*
- #cms_body #cms_dialog .uploaded_files .file {
- padding: 5px;
- float: left;
- border: 1px solid #bbb;
- border-radius: 5px;
- background-color: #fff;
- margin: 0px 5px 5px 0px;
+ #cms_body #cms_dialog .uploaded_files .file .file_info .details {
+ color: #444;
}
- #cms_body #cms_dialog .uploaded_files .file a.filename {
- float: left;
- width: 120px;
- white-space: nowrap;
- overflow: hidden;
- }
- #cms_body #cms_dialog .uploaded_files .file .thumb {
- clear: both;
- margin: 2px 0px;
+ #cms_body #cms_dialog .uploaded_files .file .file_info input {
+ display: none;
}
- #cms_body #cms_dialog .uploaded_files .file .thumb img:hover {
+ #cms_body #cms_dialog .uploaded_files .file .file_info:hover {
+ background-color: #ccc;
cursor: pointer;
- border-color: #252525;
- }
- #cms_body #cms_dialog .uploaded_files .file a.delete {
- background-position: 0px 11px;
- }
- #cms_body #cms_dialog .uploaded_files .file a.delete:hover {
- background-position: 0px 0px;
}
#cms_body #cms_dialog form.image_url {
position: absolute;
- z-index: 9999;
+ z-index: 999;
width: 650px;
}
#cms_body #cms_dialog form.image_url label {
@@ @@ -217,5 +122,4 @@
}
#cms_body #cms_dialog form.image_url input[type=text] {
width: 300px;
- }
- */
\ No newline at end of file
+ }
\ No newline at end of file
app/views/cms_admin/files/_file.html.erb +2 -2
@@ @@ -5,9 +5,9 @@
<%= link_to span_tag('x'), cms_admin_site_file_path(@site, file), :method => :delete, :remote => true, :confirm => t('.are_you_sure'), :class => 'delete' %>
</div>
- <div class='file_info'>
+ <div class='file_info' data-url='<%= file.file.url %>'>
<div class='thumb'>
- <%= image_tag file.file.url(:cms_thumb), :data => {:url => file.file.url} if file.is_image? %>
+ <%= image_tag file.file.url(:cms_thumb) if file.is_image? %>
</div>
<div class='details'>
<input type='text' value='<%= file.file.url %>'/>