From 84d1dead668d8b4ecbb4317c0e05fedfa27ebbb9 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 12 Jan 2012 09:04:57 +0200 Subject: [PATCH] new layout style --- app/assets/images/Home-UI.PNG | Bin 0 -> 891 bytes app/assets/stylesheets/projects.css.scss | 1 + app/assets/stylesheets/style.scss | 35 +++++++------- app/views/layouts/_head_panel.html.erb | 56 ----------------------- app/views/layouts/_head_panel.html.haml | 36 +++++++++++++++ app/views/layouts/project.html.haml | 17 +++---- 6 files changed, 62 insertions(+), 83 deletions(-) create mode 100644 app/assets/images/Home-UI.PNG delete mode 100644 app/views/layouts/_head_panel.html.erb create mode 100644 app/views/layouts/_head_panel.html.haml diff --git a/app/assets/images/Home-UI.PNG b/app/assets/images/Home-UI.PNG new file mode 100644 index 0000000000000000000000000000000000000000..c6925c0edd279f9cc38cce949ad61586b4b17d52 GIT binary patch literal 891 zcmV->1BCpEP){rINPoOxq`?Q7%D*S0C(UNkdT@8X8jh-?yMxVNYTuD`}B|m?Ejwm ze+F=Gv)Ke)jxgwWbe@2(`h&@2;`PnrI6jBN6xVXOeD(Fdv)SzU89?9{urBckk1sk? z0s!`!!1w7C9y2E_iOQu^9jxpIgAINZ`I-uulG) z5xrDQGy4LpQ!fVEe>(tcmimXsiof0=AMY8 zTob%=IR8vqVIpBnPSQLANa=BNW5X?L0>7kQAl(r>MFO_O10rW{_B4(FP3cXWLogA7 zv-AR3E;(if-1nO@A#1!1YCXM4=`&@4j=ccZ`Yn&jA2$0xu6d`ch!rWg3+5USQ0 zhd3Sqnuyty{>Gsfu(iZ5nnNTOar8?7Z0e3t`h=7|W_kfGhN>kd5{4WJMce1F1o%09 zh~Z*$Rlt90iOC@%i$erOXNa%>aBiT{mHz&~;`PxI!|T7P%&-uayUq}yBlt5$#B%z} zzcIZ)RT45~ld!&9NFESjab*IC$(&L8Z*=dfPQ})2Qg?_klQq|+32+!_rlj;|j2#|2 z&>`j|j*pB(q$JwK2yh%|emZ1GZ6p+Mh^c9Y2rWu)v$=?rp39KB<3sQq90Iduwd)X} zVW3Hvf#%gALwvCzuVqwdGA_GktG$*zODaIip8v#b8*9Mw-Nu~c%VwG`-I|qj- z)CZ*6=kyB?Hdi&KnoT}(`{fAG2O6I?cL?^DwB)~%0YZQf zAOr{jLVyq;1PB2_fDj-A2mwNX5Fi8y0YZQfAOsvTdh)-+QUXFir{kXh0|3+HYS%>D R7KZ=;002ovPDHLkV1m}+h;RS^ literal 0 HcmV?d00001 diff --git a/app/assets/stylesheets/projects.css.scss b/app/assets/stylesheets/projects.css.scss index be696d94381..abc4b09fcf7 100644 --- a/app/assets/stylesheets/projects.css.scss +++ b/app/assets/stylesheets/projects.css.scss @@ -525,6 +525,7 @@ h4.dash-tabs { } } +body header, h4.middle-panel { margin: 0; border-bottom: 1px solid #ccc; diff --git a/app/assets/stylesheets/style.scss b/app/assets/stylesheets/style.scss index 72c1e201eb5..89cd5c88449 100644 --- a/app/assets/stylesheets/style.scss +++ b/app/assets/stylesheets/style.scss @@ -333,8 +333,12 @@ body.login-page{background-color: #f1f1f1; padding-top: 10%} body.collapsed #container{margin: auto; width: 980px; border: 1px solid rgba(0,0,0,.22); border-top: 0; box-shadow: 0 0 0px 4px rgba(0,0,0,.04)} /* Header */ -header{background: #474D57 url('bg-header.png') repeat-x bottom; z-index: 10000; height: 44px; padding: 10px 2% 6px 2%; position: relative} -header a{color: white; text-shadow: 0 -1px 0 black} +header{ + background: #474D57 url('bg-header.png') repeat-x bottom; + z-index: 10000; + height: 44px; + padding: 10px 2% 6px 2%; +} header a:hover{color: #f1f1f1} header h1{ width: 65px; @@ -417,7 +421,7 @@ header .login-top a.pic{float: left; margin-right: 10px; } header .login-top a.username{margin-bottom: 5px} header .login-top a.logout{color: #ccc} -header{margin-bottom: 0; clear: both; } +header{margin-bottom: 0; clear: both; position:relative;} .page-title{background-color: #f1f1f1;display: block; float: left; clear: both; width: 98%; padding: 1% 1%; border-bottom: 1px solid #ccc; box-shadow: 0 -1px 0 white inset; margin-bottom: 1.5em} .page-title h1{font-size: 20px; width: 400px; margin: 0; padding-top: 8px } @@ -426,7 +430,7 @@ header{margin-bottom: 0; clear: both; } /* Account box */ header .account-box{position: absolute; right: 0; top: 8px; z-index: 10000; width: 128px; font-size: 11px; float: right; display: block; cursor: pointer;} -header .account-box img{ border-radius: 4px; right: 20px; position: absolute; width: 38px; height: 38px; display: block; box-shadow: 0 1px 2px black} +header .account-box img{ border-radius: 4px; right: 20px; position: absolute; width: 38px; height: 38px; display: block; box-shadow: 0 1px 2px black; top:-3px;} header .account-box img:after{ content: " "; display: block; @@ -550,7 +554,7 @@ header .account-links a:last-child{ /* eo Account Box */ input.search-input{float: left; text-shadow: none; width: 116px; background-image: url('icon-search.png') ; background-repeat: no-repeat; background-position: 10px; border-radius: 100px; border: 1px solid rgba(0,0,0,.7); box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.4) inset ; background-color: #D2D5DA; background-color: rgba(255,255,255,.5); padding: 5px; padding-left: 26px; margin-top: 4px; margin-right: 10px } -input.search-input:focus{ background-color: white; width: 216px;} +/*input.search-input:focus{ background-color: white; width: 216px;}*/ input.search-input::-webkit-input-placeholder {color: #666} /* eo Header */ @@ -607,7 +611,7 @@ body.project-page h2.icon .project-name i.arrow{float: right; body.project-page h2.icon span{ background-position: -78px -68px; } body.project-page .project-container{ position: relative; float: left; width: 100%; height: 100%; padding-bottom: 10px;} body.project-page .page-title{margin-bottom: 0} -body.project-page .project-sidebar {width: 180px; left: 0; top: 0; height: 100%; bottom: 0; position: absolute; background-color: #f7f7f7; float: left; display: inline-block; background: #f7f7f7; padding: 20px 0 20px 2%; margin: 0; } +body.project-page .project-sidebar {width: 110px; left: 0; top: 0; height: 100%; bottom: 0; position: absolute; background-color: #f7f7f7; float: left; display: inline-block; background: #f7f7f7; padding: 20px 0 20px 2%; margin: 0; } body.projects-page input.text.git-url { font-size: 12px; border-radius: 5px; color: #666; box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; padding: 8px 0 8px 30px; margin-bottom: 20px; background: white url('images.png') no-repeat 8px -40px; width: 136px} body.projects-page input.text.git-url {margin:10px 0 0 } @@ -615,22 +619,15 @@ body.projects-page input.text.git-url {margin:10px 0 0 } .projects_selector:hover > .project-box{ -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); box-shadow:0px 0px 10px rgba(0, 0, 0, .1); } -body.project-page .project-sidebar aside{width: 179px} -body.project-page .project-sidebar aside a{display: block; position: relative; background: white; padding: 15px 10px; border-bottom: 1px solid #eee} -body.project-page .project-sidebar aside a:first-child{ - -webkit-border-top-left-radius: 5px; - -moz-border-radius-topleft: 5px; - border-top-left-radius: 5px; -} -.project-page .project-sidebar aside a:last-child{ - -webkit-border-bottom-left-radius: 5px; - -moz-border-radius-bottomleft: 5px; - border-bottom-left-radius: 5px; +body.project-page .project-sidebar aside{width: 109px} +body.project-page .project-sidebar aside a{ + display: block; position: relative; background: white; padding: 15px 10px; border-bottom: 1px solid #eee; margin: 10px 20px 0 0; + border-radius:5px; } body.project-page .project-sidebar aside a:hover{background-color: #eee;} body.project-page .project-sidebar aside a span.number{float: right; border-radius: 5px; text-shadow: none; background: rgba(0,0,0,.12); text-align: center; padding: 5px 8px; position: absolute; top: 10px; right: 10px} -body.project-page .project-sidebar aside a.current{background-color: #79c3e0; color: white; text-shadow: none; border-color: transparent} -body.project-page .project-content{ padding: 20px; display: block; margin-left: 205px; min-height: 600px} +body.project-page .project-sidebar aside a.current{border: 2px solid #79c3e0; } +body.project-page .project-content{ padding: 20px; display: block; margin-left: 125px; min-height: 600px} body.project-page .project-content h2{ margin-top: 6px} body.project-page .project-content .button.right{margin-left: 20px} body.project-page table .commit a{color: #{$blue_link}} diff --git a/app/views/layouts/_head_panel.html.erb b/app/views/layouts/_head_panel.html.erb deleted file mode 100644 index 5b3c2a6b99d..00000000000 --- a/app/views/layouts/_head_panel.html.erb +++ /dev/null @@ -1,56 +0,0 @@ - -
-

- <%= link_to "GITLAB", root_url %> -

- - -
- <%= text_field_tag "search", nil, :placeholder => "Search", :class => "search-input" %> -
- - - -
- - -<% if current_user %> - <%= javascript_tag do %> - $(function() { - $("#search" ).autocomplete({ - source: <%= raw search_autocomplete_source %>, - select: function(event, ui) { location.href = ui.item.url } - }); - }); - <% end %> -<% end %> - -<% if current_user.require_ssh_key? %> -
-

No SSH Key is defined. You won't be able to use any Git command!. Click <%=link_to( 'here', keys_path ) %> to add one! -

-<% end %> diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml new file mode 100644 index 00000000000..0d5ae07ccc9 --- /dev/null +++ b/app/views/layouts/_head_panel.html.haml @@ -0,0 +1,36 @@ +/ Page Header +%header + - if @project && !@project.new_record? + .project_name + = truncate @project.name, :length => 20 + .git_url_wrapper + %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"} + = yield :rss_icon + + - if @project.repo_exists? + .left{:style => "margin-left:5px;"} + = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" } + .account-box + = link_to profile_path, :class => "pic" do + = image_tag gravatar_icon(current_user.email) + .account-links + = link_to profile_path, :class => "username" do + My profile + = link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete + / .account-box + -#.search + = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input" + / .login-top +- if current_user + = javascript_tag do + $(function(){ + $("#search").autocomplete({ + source: #{raw search_autocomplete_source}, + select: function(event, ui) { location.href = ui.item.url } + }); + }); + +- if current_user.require_ssh_key? + #no_ssh_key_defined.big-message.error + %p + No SSH Key is defined. You won't be able to use any Git command!. Click #{link_to( 'here', keys_path )} to add one! diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml index 5545cc2f269..589041be91a 100644 --- a/app/views/layouts/project.html.haml +++ b/app/views/layouts/project.html.haml @@ -18,31 +18,32 @@ = render :partial => "layouts/flash" #container = render :partial => "layouts/head_panel" - = render :partial => "layouts/middle_panel" if @project && !@project.new_record? + -#= render :partial => "layouts/middle_panel" if @project && !@project.new_record? .project-container .project-sidebar .fixed %aside - = link_to "Project", project_path(@project), :class => project_tab_class + = link_to project_path(@project), :class => project_tab_class do + = image_tag "Home-UI.PNG", :width => 26 + %span{ :class => "number" } Pr + = link_to "Repository", project_repository_path(@project), :class => repository_tab_class = link_to "Tree", tree_project_ref_path(@project, @project.root_ref), :class => tree_tab_class = link_to "Commits", project_commits_path(@project), :class => current_page?(:controller => "commits", :action => "index", :project_id => @project) ? "current" : nil - = link_to "Network graph", graph_project_path(@project), :class => current_page?(:controller => "projects", :action => "graph", :id => @project) ? "current" : nil + = link_to "Network", graph_project_path(@project), :class => current_page?(:controller => "projects", :action => "graph", :id => @project) ? "current" : nil = link_to project_issues_filter_path(@project), :class => (controller.controller_name == "issues") ? "current" : nil do Issues - - if @project.issues.open_for(current_user).count > 0 + -#- if @project.issues.open_for(current_user).count > 0 %span{ :class => "number" }= @project.issues.open_for(current_user).count = link_to wall_project_path(@project), :class => current_page?(:controller => "projects", :action => "wall", :id => @project) ? "current" : nil do Wall - if @project.common_notes.today.count > 0 %span{ :class => "number" }= @project.common_notes.today.count = link_to project_merge_requests_path(@project), :class => (controller.controller_name == "merge_requests") ? "current" : nil do - Merge Requests - - if @project.merge_requests.opened.count > 0 + Merge + -#- if @project.merge_requests.opened.count > 0 %span{ :class => "number" }= @project.merge_requests.opened.count - .medium-tags{:style => 'padding: 10px 0 0 10px; width: 210px;'}= tag_list @project - .project-content = yield