kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'new-sidebar' into 'master'

Browse source 
New sidebar design

I want to make separation between sidebar and content

- [x] change sidebar and header colors
- [x] change colors for old light theme so it matches dark style too
- [x] rename theme names to something more reasonable
- [x] fix header logo collapse with JS
- [x] fix navless layouts (explore page, login page, snippets, user page)
- [x] fix tests

See merge request !558
This commit is contained in:
Dmitriy Zaporozhets 2015-04-23 10:51:02 +00:00
commit 1c96b0b9bf
33 changed files with 287 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/sidebar.js.coffee
View file

@ -4,6 +4,7 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
expanded = 'page-sidebar-expanded'
$('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
$('header').toggleClass("header-collapsed header-expanded")
$('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
$.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
)

7
app/assets/stylesheets/base/mixins.scss
View file

@ -50,13 +50,6 @@
@include box-shadow(0 0 0 3px #f1f1f1);
}
@mixin header-font {
color: $style_color;
font-size: 16px;
line-height: 44px;
font-weight: normal;
}
@mixin md-typography {
font-size: 15px;
line-height: 1.5;

90
app/assets/stylesheets/pages/header.scss → app/assets/stylesheets/generic/header.scss
View file

@ -11,9 +11,55 @@ header {
width: 100%;
.navbar-inner {
background: #FFF;
border-bottom: 1px solid #DDD;
filter: none;
.title {
position: relative;
float: left;
margin: 0;
margin-left: 25px;
font-size: 18px;
line-height: 44px;
font-weight: normal;
color: #555;
@include str-truncated(37%);
a {
color: #555;
&:hover {
text-decoration: underline;
}
}
}
.app_logo {
border-bottom: 1px solid transparent;
margin-bottom: -1px;
a {
padding: 5px 8px;
img {
float: left;
}
h3 {
width: 158px;
float: left;
margin: 0;
margin-left: 20px;
font-size: 18px;
line-height: 34px;
font-weight: normal;
}
}
}
.nav > li > a {
color: #666;
font-size: 14px;
line-height: 32px;
padding: 6px 10px;
@ -100,10 +146,8 @@ header {
a {
float: left;
padding: 5px 0;
height: 46px;
width: 52px;
text-align: center;
width: 100%;
img {
width: 36px;
@ -115,20 +159,6 @@ header {
}
}
/**
*
* Project / Area name
*
*/
.title {
position: relative;
float: left;
margin: 0;
margin-left: 5px;
@include header-font;
@include str-truncated(37%);
}
.profile-pic {
padding: 0px !important;
width: 46px;
@ -164,9 +194,10 @@ header {
padding-left: 25px;
font-size: 13px;
@include border-radius(3px);
border: 1px solid #c6c6c6;
border: 1px solid #DDD;
box-shadow: none;
@include transition(all 0.15s ease-in 0s);
background-color: #f5f5f5;
}
}
}
@ -192,3 +223,26 @@ header {
right: 35px !important;
}
}
@media (max-width: $screen-md-max) {
.header-collapsed, .header-expanded {
width: 52px;
h3 {
display: none;
}
}
}
@media(min-width: $screen-md-max) {
.header-collapsed {
width: 52px;
h3 {
display: none;
}
}
.header-expanded {
}
}

24
app/assets/stylesheets/generic/nav_sidebar.scss → app/assets/stylesheets/generic/sidebar.scss
View file

@ -6,7 +6,6 @@
top: 0;
left: 0;
height: 100%;
border-right: 1px solid $border-color;
}
}
@ -38,28 +37,10 @@
}
.nav-sidebar li {
&.active a {
color: $text-color;
background: #FFF !important;
font-weight: bold;
border: 1px solid #EEE;
border-right: 1px solid transparent;
border-left: 3px solid $style_color;
&.no-highlight {
background: none !important;
border: none;
}
i {
color: $text-color;
}
}
}
.nav-sidebar li {
&.separate-item {
border-top: 1px solid $border-color;
padding-top: 10px;
margin-top: 10px;
}
@ -75,8 +56,6 @@
&:hover {
text-decoration: none;
color: $text-color;
background: $border-color;
}
&:active, &:focus {
@ -158,9 +137,6 @@
left: 198px;
font-size: 13px;
background: transparent;
color: black;
border-left: 1px solid $border-color;
border-bottom: 1px solid $border-color;
}
.collapse-nav a:hover {

2
app/assets/stylesheets/pages/profile.scss
View file

@ -37,7 +37,7 @@
}
&.default {
background: #f1f1f1;
background: #888888;
}
&.modern {

63
app/assets/stylesheets/themes/dark-theme.scss
View file

@ -1,63 +0,0 @@
@mixin dark-theme($color-light, $color, $color-darker, $color-dark) {
header {
&.navbar-gitlab {
.navbar-inner {
background: $color;
.navbar-toggle {
color: #FFF;
}
.app_logo, .navbar-toggle {
&:hover {
background-color: $color-darker;
}
}
.app_logo {
background-color: $color-dark;
}
.title {
color: #FFF;
a {
color: #FFF;
&:hover {
text-decoration: underline;
}
}
}
.search {
.search-input {
background-color: $color-light;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid $color-light;
&:focus {
background-color: white;
}
}
}
.search-input::-webkit-input-placeholder {
color: #666;
}
.nav > li > a {
color: $color-light;
&:hover, &:focus, &:active {
background: none;
color: #FFF;
}
}
.search-input {
border-color: $color-light;
}
}
}
}
}

75
app/assets/stylesheets/themes/gitlab-theme.scss Normal file
View file

@ -0,0 +1,75 @@
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
header {
&.navbar-gitlab {
.navbar-inner {
.navbar-toggle {
color: #FFF;
}
.app_logo, .navbar-toggle {
a {
color: $color-light;
}
background-color: $color-darker;
&:hover {
background-color: $color-dark;
a {
color: #FFF;
}
}
}
}
}
}
.page-with-sidebar {
background: $color-darker;
.collapse-nav a {
color: #FFF;
background: $color;
}
.sidebar-wrapper {
background: $color-darker;
border-right: 1px solid $color-darker;
}
.nav-sidebar li {
a {
color: $color-light;
&:hover, &:focus, &:active {
background: $color-dark;
}
i {
color: $color-light;
}
.count {
color: $color-light;
background: $color-dark;
}
}
&.separate-item {
border-top: 1px solid $color;
}
&.active a {
color: #FFF;
font-weight: bold;
&.no-highlight {
border: none;
}
i {
color: #FFF
}
}
}
}
}

24
app/assets/stylesheets/themes/ui_basic.scss
View file

@ -4,27 +4,5 @@
*
*/
.ui_basic {
header {
&.navbar-gitlab {
.navbar-inner {
background: #F1F1F1;
border-bottom: 1px solid #DDD;
.title {
color: #555;
a {
color: #555;
&:hover {
text-decoration: underline;
}
}
}
.nav > li > a {
color: $style_color;
}
}
}
}
@include gitlab-theme(#CCCCCC, #888888, #777777, #666666);
}

2
app/assets/stylesheets/themes/ui_blue.scss
View file

@ -2,5 +2,5 @@
* Blue GitLab UI theme
*/
.ui_blue {
@include dark-theme(#BECDE9, #2980b9, #1970a9, #096099);
@include gitlab-theme(#BECDE9, #2980b9, #1970a9, #096099);
}

2
app/assets/stylesheets/themes/ui_color.scss
View file

@ -2,5 +2,5 @@
* Violet GitLab UI theme
*/
.ui_color {
@include dark-theme(#98C, #548, #436, #325);
@include gitlab-theme(#98C, #548, #436, #325);
}

2
app/assets/stylesheets/themes/ui_gray.scss
View file

@ -2,5 +2,5 @@
* Gray GitLab UI theme
*/
.ui_gray {
@include dark-theme(#979797, #373737, #272727, #222222);
@include gitlab-theme(#979797, #373737, #272727, #222222);
}

2
app/assets/stylesheets/themes/ui_mars.scss
View file

@ -2,5 +2,5 @@
* Classic GitLab UI theme
*/
.ui_mars {
@include dark-theme(#979DA7, #474D57, #373D47, #24272D);
@include gitlab-theme(#979DA7, #474D57, #373D47, #24272D);
}

2
app/assets/stylesheets/themes/ui_modern.scss
View file

@ -2,5 +2,5 @@
* Modern GitLab UI theme
*/
.ui_modern {
@include dark-theme(#ADC, #019875, #018865, #017855);
@include gitlab-theme(#ADC, #019875, #018865, #017855);
}

30
app/controllers/snippets_controller.rb
View file

@ -16,24 +16,24 @@ class SnippetsController < ApplicationController
layout :determine_layout
def index
@snippets = SnippetsFinder.new.execute(current_user, filter: :all).page(params[:page]).per(PER_PAGE)
end
if params[:username].present?
@user = User.find_by(username: params[:username])
def user_index
@user = User.find_by(username: params[:username])
render_404 and return unless @user
render_404 and return unless @user
@snippets = SnippetsFinder.new.execute(current_user, {
filter: :by_user,
user: @user,
scope: params[:scope] }).
page(params[:page]).per(PER_PAGE)
@snippets = SnippetsFinder.new.execute(current_user, {
filter: :by_user,
user: @user,
scope: params[:scope] }).
page(params[:page]).per(PER_PAGE)
if @user == current_user
render 'current_user_index'
if @user == current_user
render 'current_user_index'
else
render 'user_index'
end
else
render 'user_index'
@snippets = SnippetsFinder.new.execute(current_user, filter: :all).page(params[:page]).per(PER_PAGE)
end
end
@ -108,6 +108,6 @@ class SnippetsController < ApplicationController
end
def determine_layout
current_user ? 'navless' : 'public_users'
current_user ? 'snippets' : 'public_users'
end
end

8
app/helpers/application_helper.rb
View file

@ -318,12 +318,4 @@ module ApplicationHelper
profile_key_path(key)
end
end
def nav_sidebar_class
if nav_menu_collapsed?
"page-sidebar-collapsed"
else
"page-sidebar-expanded"
end
end
end

16
app/helpers/nav_helper.rb
View file

@ -2,4 +2,20 @@ module NavHelper
def nav_menu_collapsed?
cookies[:collapsed_nav] == 'true'
end
def nav_sidebar_class
if nav_menu_collapsed?
"page-sidebar-collapsed"
else
"page-sidebar-expanded"
end
end
def nav_header_class
if nav_menu_collapsed?
"header-collapsed"
else
"header-expanded"
end
end
end

8
app/views/explore/projects/trending.html.haml
View file

@ -1,3 +1,9 @@
.explore-title
%h3
Explore GitLab
%p.lead
Discover projects and groups. Share your projects with others
%hr
.explore-trending-block
%p.lead
%i.fa.fa-comments-o
@ -7,5 +13,5 @@
%ul.bordered-list
= render @trending_projects
.center
.center.append-bottom-20
= link_to 'Show all projects', explore_projects_path, class: 'btn btn-primary'

5
app/views/layouts/_empty_head_panel.html.haml Normal file
View file

@ -0,0 +1,5 @@
%header.navbar.navbar-fixed-top.navbar-gitlab
.navbar-inner
.container
%h4.center
= image_tag 'logo-white.png', width: 32, height: 32

3
app/views/layouts/_head_panel.html.haml
View file

@ -1,9 +1,10 @@
%header.navbar.navbar-fixed-top.navbar-gitlab
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
.navbar-inner
.container
%div.app_logo
= link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
= brand_header_logo
%h3 GitLab
%h1.title= title
%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}

30
app/views/layouts/_page.html.haml
View file

@ -1,20 +1,18 @@
- if defined?(sidebar)
.page-with-sidebar{ class: nav_sidebar_class }
= render "layouts/broadcast"
.sidebar-wrapper
.page-with-sidebar{ class: nav_sidebar_class }
= render "layouts/broadcast"
.sidebar-wrapper
- if defined?(sidebar)
= render(sidebar)
.collapse-nav
= render partial: 'layouts/collapse_button'
.content-wrapper
.container-fluid
.content
= render "layouts/flash"
.clearfix
= yield
- else
.container.navless-container
.content
= yield
- elsif current_user
= render 'layouts/nav/dashboard'
.collapse-nav
= render partial: 'layouts/collapse_button'
.content-wrapper
.container-fluid
.content
= render "layouts/flash"
.clearfix
= yield
= yield :embedded_scripts

3
app/views/layouts/_public_head_panel.html.haml
View file

@ -1,9 +1,10 @@
%header.navbar.navbar-fixed-top.navbar-gitlab
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
.navbar-inner
.container
%div.app_logo
= link_to explore_root_path, class: "home" do
= brand_header_logo
%h3 GitLab
%h1.title= title
%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}

2
app/views/layouts/devise.html.haml
View file

@ -2,8 +2,8 @@
%html{ lang: "en"}
= render "layouts/head"
%body.ui_mars.login-page.application
= render "layouts/empty_head_panel"
= render "layouts/broadcast"
= render "layouts/public_head_panel", title: ''
.container.navless-container
.content
= render "layouts/flash"

22
app/views/layouts/explore.html.haml
View file

@ -1,4 +1,4 @@
- page_title = 'Explore'
- page_title = 'Explore GitLab'
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: page_title
@ -8,23 +8,5 @@
= render "layouts/head_panel", title: link_to(page_title, explore_root_path)
- else
= render "layouts/public_head_panel", title: link_to(page_title, explore_root_path)
.container.navless-container
.content
.explore-title
%h3
Explore GitLab
%p.lead
Discover projects and groups. Share your projects with others
%ul.nav.nav-tabs
= nav_link(path: 'projects#trending') do
= link_to 'Trending Projects', explore_root_path
= nav_link(path: 'projects#starred') do
= link_to 'Most Starred Projects', starred_explore_projects_path
= nav_link(path: 'projects#index') do
= link_to 'All Projects', explore_projects_path
= nav_link(controller: :groups) do
= link_to 'All Groups', explore_groups_path
= yield
= render 'layouts/page', sidebar: 'layouts/nav/explore'

18
app/views/layouts/nav/_explore.html.haml Normal file
View file

@ -0,0 +1,18 @@
%ul.nav.nav-sidebar
= nav_link(path: 'projects#trending') do
= link_to explore_root_path do
%i.fa.fa-comments
%span Trending Projects
= nav_link(path: 'projects#starred') do
= link_to starred_explore_projects_path do
%i.fa.fa-star
%span Most Starred Projects
= nav_link(path: 'projects#index') do
= link_to explore_projects_path do
%i.fa.fa-bookmark
%span All Projects
= nav_link(controller: :groups) do
= link_to explore_groups_path do
%i.fa.fa-group
%span All Groups

11
app/views/layouts/nav/_snippets.html.haml Normal file
View file

@ -0,0 +1,11 @@
%ul.nav.nav-sidebar
= nav_link(path: user_snippets_path(current_user), html_options: {class: 'home'}) do
= link_to user_snippets_path(current_user), title: 'Your snippets' do
%i.fa.fa-dashboard
%span
Your Snippets
= nav_link(path: snippets_path) do
= link_to snippets_path, title: 'Discover snippets' do
%i.fa.fa-globe
%span
Discover Snippets

5
app/views/layouts/navless.html.haml
View file

@ -4,7 +4,4 @@
%body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/broadcast"
= render "layouts/head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
.container.navless-container
.content
= render "layouts/flash"
= yield
= render 'layouts/page'

6
app/views/layouts/snippets.html.haml Normal file
View file

@ -0,0 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Dashboard"
%body{class: "#{app_theme} application", :'data-page' => body_data_page }
= render "layouts/head_panel", title: link_to("Snippets", snippets_path)
= render 'layouts/page', sidebar: 'layouts/nav/snippets'

6
app/views/profiles/design.html.haml
View file

@ -12,17 +12,17 @@
= label_tag do
.prev.default
= f.radio_button :theme_id, 1
Default
Graphite
= label_tag do
.prev.classic
= f.radio_button :theme_id, 2
Classic
Charcoal
= label_tag do
.prev.modern
= f.radio_button :theme_id, 3
Modern
Green
= label_tag do
.prev.gray

51
app/views/snippets/current_user_index.html.haml
View file

@ -3,37 +3,32 @@
.pull-right
= link_to new_snippet_path, class: "btn btn-new btn-grouped", title: "New Snippet" do
Add new snippet
= link_to snippets_path, class: "btn btn-grouped" do
Discover snippets
%p.light
Share code pastes with others out of git repository
%hr
.row
.col-md-3
%ul.nav.nav-pills.nav-stacked
= nav_tab :scope, nil do
= link_to user_snippets_path(@user) do
All
%span.pull-right
= @user.snippets.count
= nav_tab :scope, 'are_private' do
= link_to user_snippets_path(@user, scope: 'are_private') do
Private
%span.pull-right
= @user.snippets.are_private.count
= nav_tab :scope, 'are_internal' do
= link_to user_snippets_path(@user, scope: 'are_internal') do
Internal
%span.pull-right
= @user.snippets.are_internal.count
= nav_tab :scope, 'are_public' do
= link_to user_snippets_path(@user, scope: 'are_public') do
Public
%span.pull-right
= @user.snippets.are_public.count
%ul.nav.nav-tabs
= nav_tab :scope, nil do
= link_to user_snippets_path(@user) do
All
%span.badge
= @user.snippets.count
= nav_tab :scope, 'are_private' do
= link_to user_snippets_path(@user, scope: 'are_private') do
Private
%span.badge
= @user.snippets.are_private.count
= nav_tab :scope, 'are_internal' do
= link_to user_snippets_path(@user, scope: 'are_internal') do
Internal
%span.badge
= @user.snippets.are_internal.count
= nav_tab :scope, 'are_public' do
= link_to user_snippets_path(@user, scope: 'are_public') do
Public
%span.badge
= @user.snippets.are_public.count
.col-md-9.my-snippets
= render 'snippets'
.my-snippets
= render 'snippets'

1
app/views/snippets/index.html.haml
View file

@ -2,7 +2,6 @@
Public snippets
.pull-right
- if current_user
= link_to new_snippet_path, class: "btn btn-new btn-grouped", title: "New Snippet" do
Add new snippet

3
config/routes.rb
View file

@ -52,7 +52,8 @@ Gitlab::Application.routes.draw do
get 'raw'
end
end
get '/s/:username' => 'snippets#user_index', as: :user_snippets, constraints: { username: /.*/ }
get '/s/:username' => 'snippets#index', as: :user_snippets, constraints: { username: /.*/ }
#
# Invites

6
features/steps/snippets/user.rb
View file

@ -32,19 +32,19 @@ class Spinach::Features::SnippetsUser < Spinach::FeatureSteps
end
step 'I click "Internal" filter' do
within('.nav-stacked') do
within('.nav-tabs') do
click_link "Internal"
end
end
step 'I click "Private" filter' do
within('.nav-stacked') do
within('.nav-tabs') do
click_link "Private"
end
end
step 'I click "Public" filter' do
within('.nav-stacked') do
within('.nav-tabs') do
click_link "Public"
end
end

2
spec/routing/routing_spec.rb
View file

@ -28,7 +28,7 @@ end
# DELETE /snippets/:id(.:format) snippets#destroy
describe SnippetsController, "routing" do
it "to #user_index" do
expect(get("/s/User")).to route_to('snippets#user_index', username: 'User')
expect(get("/s/User")).to route_to('snippets#index', username: 'User')
end
it "to #raw" do