From 34e15801845f806e0f0f04aff8ba78962f8a9086 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 28 Feb 2012 00:00:19 +0200 Subject: [PATCH] Improved file browse page, prepared for downloads tab --- app/assets/stylesheets/common.scss | 7 - app/assets/stylesheets/highlight.scss | 5 +- app/assets/stylesheets/ref_select.scss | 7 +- app/assets/stylesheets/tree.scss | 295 ++++++++++++------------- app/views/commits/_head.html.haml | 2 +- app/views/refs/_tree.html.haml | 9 +- app/views/refs/_tree_file.html.haml | 14 +- app/views/refs/tree.html.haml | 10 + 8 files changed, 170 insertions(+), 179 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 08eafb97adb..602123638c4 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -583,13 +583,6 @@ ul.bordered-list li:last-child { border:none } } } -.project-refs-form.commit-refs-form .chzn-container { - position: relative; - top: 0; - left: 0; - margin-right: 10px; -} - li.commit { .avatar { width:24px; diff --git a/app/assets/stylesheets/highlight.scss b/app/assets/stylesheets/highlight.scss index f82a9e55a56..0dbfc0ed964 100644 --- a/app/assets/stylesheets/highlight.scss +++ b/app/assets/stylesheets/highlight.scss @@ -10,7 +10,8 @@ table.highlighttable margin:0px; padding:0px; font-size:12px; - table-layout:fixed + table-layout:fixed; + background: #F7F7F7; } td.code, @@ -25,6 +26,8 @@ td.linenos{ background:none; padding:10px 0px 0px 10px; margin-left:0px; + border-left: 1px solid #DEE2E3; + background: white; } .linenodiv pre, diff --git a/app/assets/stylesheets/ref_select.scss b/app/assets/stylesheets/ref_select.scss index 16753509e93..ff0ffa9f522 100644 --- a/app/assets/stylesheets/ref_select.scss +++ b/app/assets/stylesheets/ref_select.scss @@ -13,9 +13,10 @@ } .project-refs-form .chzn-container { - position:relative; - top: -5px; - left: -11px; + position: relative; + top: 0; + left: 0; + margin-right: 10px; .chzn-drop { margin:7px 0; diff --git a/app/assets/stylesheets/tree.scss b/app/assets/stylesheets/tree.scss index d86c6325a41..592992541af 100644 --- a/app/assets/stylesheets/tree.scss +++ b/app/assets/stylesheets/tree.scss @@ -1,189 +1,178 @@ -#tree-content-holder { - float:left; - width:100%; -} -#tree-readme-holder { - float:left; - width:100%; - .readme { - @include round-borders-all(4px); - padding:4px 15px; - background: #F7F7F7; - } -} -#tree-breadcrumbs { - div { - margin:0; - margin-bottom:20px; +#tree-holder { + #tree-content-holder { float:left; - font-size:14px; + width:100%; } -} - -.tree_progress { - display:none; - margin:20px; - &.loading { - display:block; - } -} - - -/** FILE CONTENT VIEW **/ -.view_file_content{ - .old_line, .new_line { - background:#ECECEC; - color:#777; - width:15px; + #tree-readme-holder { float:left; - padding: 0px 10px; - border-right: 1px solid #ccc; + width:100%; + .readme { + @include round-borders-all(4px); + padding:4px 15px; + background: #F7F7F7; + } } - .old_line{ + + .tree_progress { display:none; + margin:20px; + &.loading { + display:block; + } } -} -.view_file .view_file_header, -.diff_file .diff_file_header { - background-image: -webkit-gradient(linear, 0 0, 0 26, color-stop(0.076, #fefefe), to(#F6F7F8)); - background-image: -webkit-linear-gradient(#fefefe 7.6%, #F6F7F8); - background-image: -moz-linear-gradient(#fefefe 7.6%, #F6F7F8); - background-image: -o-linear-gradient(#fefefe 7.6%, #F6F7F8); + + /** FILE CONTENT VIEW **/ + .view_file_content{ + .old_line, .new_line { + background:#ECECEC; + color:#777; + width:15px; + float:left; + padding: 0px 10px; + border-right: 1px solid #ccc; + } + .old_line{ + display:none; + } + } + + .view_file .view_file_header, + .diff_file .diff_file_header { + background:#f5f5f5; margin: 0; font-weight: normal; font-weight: bold; text-align: left; color: #666; - border-bottom: 1px solid #DEE2E3; + border-bottom: 1px solid #ccc; padding: 7px 10px; .mode_text, .file_icon { - margin-right:15px; - padding-right:15px; - border-right:1px solid $lite_border_color; - float:left; color:#aaa; } - - .file_icon { - padding-left:15px; - } -} - -.view_file { - border:1px solid #CCC; - margin-bottom:1em; - - .view_file_content { - background:#fff; - color:#514721; - font-size: 11px; } - .view_file_content_image { - background:#eee; - text-align:center; - img { - padding:100px; - max-width:300px; + + .view_file { + border:1px solid #CCC; + margin-bottom:1em; + + .view_file_content { + background:#fff; + color:#514721; + font-size: 11px; + } + .view_file_content_image { + background:#eee; + text-align:center; + img { + padding:100px; + max-width:300px; + } } } -} -td.code { - width: 100%; - .highlight { - margin-left: 55px; - overflow:auto; - overflow-y:hidden; - border-left: 1px solid #DEE2E3; - background: white; + td.code { + width: 100%; + .highlight { + margin-left: 55px; + overflow:auto; + overflow-y:hidden; + } } -} -.highlight pre { - white-space: pre; - word-wrap:normal; -} - -table.highlighttable { - border: none; - background: #F7F7F7; -} -body.project-page table.highlighttable td { border: none } -table.highlighttable tr:hover { background:none;} - -table.highlighttable pre{ - line-height:16px !important; - font-size:12px !important; -} - -table.highlighttable .linenodiv pre { - text-align: right; - padding-right: 4px; - color:#888; -} - -.tree-item { - &:hover { - background: $hover; - cursor:pointer; + .highlight pre { + white-space: pre; + word-wrap:normal; } + table.highlighttable { + border: none; + } + body.project-page table.highlighttable td { border: none } + table.highlighttable tr:hover { background:none;} + + table.highlighttable pre{ + line-height:16px !important; + font-size:12px !important; + } + + table.highlighttable .linenodiv pre { + text-align: right; + padding-right: 4px; + color:#888; + } + + .tree-item { + &:hover { + background: $hover; + cursor:pointer; + } + + + .tree-item-file-name { + font-weight:bold; + a { + color:$style_color; + } + + img { + position: relative; + top: 2px; + } + } + } + + ul.breadcrumb { + background:white; + border:none; - .tree-item-file-name { - font-weight:bold; a { - color:$style_color; - } - - img { - position: relative; - top: 2px; + color:#666; + font-weight:bold; + font-size:14px; } } -} -.breadcrumb { - background:white; - border:none; + #tree-slider { + @include shade; - a { - color:$link_color; - font-weight:bold; - font-size:13px; - } -} + td { + padding:7px; + border-color:#f1f1f1; + } -#tree-slider { - @include shade; - - td { - padding:7px; - border-color:#f1f1f1; + th { + background:#f5f5f5; + } } - th { - background:#f5f5f5; - } -} - -.tree-commit-link { - color:#333; -} - -#tree-content-holder .view_file{ - @include shade; -} - -#tree-readme-holder .readme { - @include shade; - margin-bottom:20px; -} - -a.tree-commit-link { - color: #666; - &:hover { - text-decoration: underline; + .tree-commit-link { + color:#333; + } + + #tree-content-holder .view_file{ + @include shade; + } + + #tree-readme-holder .readme { + @include shade; + margin-bottom:20px; + } + + a.tree-commit-link { + color: #666; + &:hover { + text-decoration: underline; + } + } + + .arrow { + background: url("images.png") no-repeat -85px -77px; + width: 19px; + height: 16px; + float: left; + position: relative; + left: -10px; } } diff --git a/app/views/commits/_head.html.haml b/app/views/commits/_head.html.haml index 6d541bbdd15..6951c3a283c 100644 --- a/app/views/commits/_head.html.haml +++ b/app/views/commits/_head.html.haml @@ -1,6 +1,6 @@ %ul.tabs %li - = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form commit-refs-form" do + = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form" do = select_tag "ref", grouped_options_refs, :onchange => "$(this.form).trigger('submit');", :class => "project-refs-select" = hidden_field_tag :destination, "commits" diff --git a/app/views/refs/_tree.html.haml b/app/views/refs/_tree.html.haml index 3ddcacd5ce2..e5908676ae8 100644 --- a/app/views/refs/_tree.html.haml +++ b/app/views/refs/_tree.html.haml @@ -1,13 +1,8 @@ %ul.breadcrumb %li - = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form left", :remote => true do - = select_tag "ref", grouped_options_refs, :onchange => "$(this.form).trigger('submit');", :class => "project-refs-select" - = hidden_field_tag :destination, "tree" - = hidden_field_tag :path, params[:path] - - %li + %span.arrow = link_to tree_project_ref_path(@project, @ref, :path => nil), :remote => true do - = @project.code + = @project.name - tree.breadcrumbs(6) do |link| \/ %li= link diff --git a/app/views/refs/_tree_file.html.haml b/app/views/refs/_tree_file.html.haml index 8b9a45c804b..78662229afa 100644 --- a/app/views/refs/_tree_file.html.haml +++ b/app/views/refs/_tree_file.html.haml @@ -1,13 +1,13 @@ :css .view_file .view_file_header - %strong - %span.file_icon= image_tag "txt.png" - %span.mode_text= file.mode - %span.file_name= name - = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path] ), :class => "right", :target => "_blank" - = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref ), :class => "right", :style => "margin-right:10px;" - %br/ + .row + .span1.file_icon= image_tag "txt.png" + .span2.mode_text= file.mode + .span7.file_name= name + .span4.right + = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path] ), :class => "right", :target => "_blank" + = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref ), :class => "right", :style => "margin-right:10px;" - if file.text? .view_file_content - unless file.empty? diff --git a/app/views/refs/tree.html.haml b/app/views/refs/tree.html.haml index 46eeb6f5c29..ece6f188c97 100644 --- a/app/views/refs/tree.html.haml +++ b/app/views/refs/tree.html.haml @@ -1,3 +1,13 @@ +%ul.tabs + %li + = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form", :remote => true do + = select_tag "ref", grouped_options_refs, :onchange => "$(this.form).trigger('submit');", :class => "project-refs-select" + = hidden_field_tag :destination, "tree" + = hidden_field_tag :path, params[:path] + %li{:class => "#{'active' if (controller.controller_name == "refs") }"} + = link_to tree_project_ref_path(@project, @ref) do + Code + #tree-holder= render :partial => "tree", :locals => {:repo => @repo, :commit => @commit, :tree => @tree} :javascript