Skip to content

G
gitlab-ce
Commit 5203a984 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files
Options

Merge branch 'refactor-ui-lists' into 'master' 

Refactor colors and lists

* Introduce 2 color links: black and blue
* Use black color link for UI elements like lists
* Refactor lists to use .title nested under li
* Make all lists (events, todos, activity, projects etc) use style
* List colorschema is now 333 for links and 555 for text
Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

cc @jschatz1 @skyruler 

See merge request !3307
parents eba00325 daeed3fd
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 76 deletions
app/assets/stylesheets/framework/lists.scss
View file @ 5203a984
......@@ -111,14 +111,17 @@ ul.content-list {
> li {
border-color: $table-border-color;
color: $list-text-color;
font-size: $list-font-size;
color: $list-text-color;
.title {
color: $list-title-color;
font-weight: 600;
}
a {
color: $gl-dark-link-color;
}
.description {
p {
@include str-truncated;
......
app/assets/stylesheets/framework/variables.scss
View file @ 5203a984
......@@ -10,36 +10,37 @@ $gutter_inner_width: 258px;
/*
* UI elements
*/
$border-color: #efeff1;
$border-color: #efeff1;
$table-border-color: #eef0f2;
$background-color: #faf9f9;
$background-color: #faf9f9;
/*
* Text
*/
$gl-font-size: 15px;
$gl-title-color: #333;
$gl-text-color: #555;
$gl-font-size: 15px;
$gl-title-color: #333;
$gl-text-color: #555;
$gl-text-green: #4a2;
$gl-text-red: #d12f19;
$gl-text-orange: #d90;
$gl-link-color: #3084bb;
$gl-dark-link-color: #333;
$gl-placeholder-color: #8f8f8f;
$gl-text-green: #4a2;
$gl-text-red: #d12f19;
$gl-text-orange: #d90;
$gl-header-color: $gl-title-color;
$gl-link-color: #333c48;
$gl-gray: $gl-text-color;
$gl-gray: $gl-text-color;
$gl-header-color: $gl-title-color;
/*
* Lists
*/
$list-font-size: $gl-font-size;
$list-font-size: $gl-font-size;
$list-title-color: $gl-title-color;
$list-text-color: $gl-text-color;
$list-text-color: $gl-text-color;
/*
* Markdown
*/
$md-text-color: #444;
$md-link-color: #3084bb;
$md-text-color: $gl-text-color;
$md-link-color: $gl-link-color;
/*
* Code
......
app/assets/stylesheets/pages/commits.scss
View file @ 5203a984
......@@ -55,7 +55,7 @@ li.commit {
}
.commit-row-message {
color: $gl-link-color;
color: $gl-dark-link-color;
&:hover {
text-decoration: underline;
......
app/assets/stylesheets/pages/events.scss
View file @ 5203a984
......@@ -21,7 +21,7 @@
}
a {
color: #4c4e54;
color: $gl-dark-link-color;
}
.avatar {
......@@ -31,11 +31,7 @@
.event-title {
@include str-truncated(calc(100% - 174px));
font-weight: 600;
color: $list-title-color;
a {
color: $list-title-color;
}
color: $list-text-color;
}
.event-body {
......
app/assets/stylesheets/pages/issues.scss
View file @ 5203a984
......@@ -3,7 +3,7 @@
padding: 10px $gl-padding;
position: relative;
.issue-title {
.title {
margin-bottom: 2px;
}
......
app/assets/stylesheets/pages/todos.scss
View file @ 5203a984
......@@ -14,26 +14,8 @@
}
.todo-item {
font-size: $gl-font-size;
padding-left: $gl-avatar-size + $gl-padding-top;
color: $gl-text-color;
a {
color: #4c4e54;
}
.avatar {
margin-left: -($gl-avatar-size + $gl-padding-top);
}
.todo-title {
@include str-truncated(calc(100% - 174px));
font-weight: 600;
color: $list-title-color;
a {
color: $list-title-color;
}
}
.todo-body {
......
app/assets/stylesheets/pages/tree.scss
View file @ 5203a984
......@@ -41,7 +41,7 @@
vertical-align: middle;
i, a {
color: $gl-link-color;
color: $gl-dark-link-color;
}
img {
......
app/views/dashboard/todos/_todo.html.haml
View file @ 5203a984
......@@ -2,7 +2,7 @@
.todo-item.todo-block
= image_tag avatar_icon(todo.author_email, 40), class: 'avatar s40', alt:''
.todo-title
.todo-title.title
%span.author-name
- if todo.author
= link_to_author(todo)
......
app/views/dashboard/todos/index.html.haml
View file @ 5203a984
......@@ -51,7 +51,7 @@
.panel-heading
= link_to project.name_with_namespace, namespace_project_path(project.namespace, project)
%ul.well-list.todos-list
%ul.content-list.todos-list
= render group[1]
= paginate @todos, theme: "gitlab"
- else
......
app/views/projects/issues/_issue.html.haml
View file @ 5203a984
......@@ -3,11 +3,11 @@
.issue-check
= check_box_tag dom_id(issue,"selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
.issue-title
.issue-title.title
%span.issue-title-text
= confidential_icon(issue)
= link_to_gfm issue.title, issue_path(issue), class: "title"
%ul.controls.light
= link_to_gfm issue.title, issue_path(issue)
%ul.controls
- if issue.closed?
%li
CLOSED
......
app/views/projects/merge_requests/_merge_request.html.haml
View file @ 5203a984
%li{ class: mr_css_classes(merge_request) }
.merge-request-title
.merge-request-title.title
%span.merge-request-title-text
= link_to_gfm merge_request.title, merge_request_path(merge_request), class: "title"
%ul.controls.light
= link_to_gfm merge_request.title, merge_request_path(merge_request)
%ul.controls
- if merge_request.merged?
%li
MERGED
......
app/views/shared/groups/_group.html.haml
View file @ 5203a984
......@@ -10,7 +10,7 @@
%i.fa.fa-cogs
= link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do
%i.fa.fa-sign-out
= icon('sign-out')
.stats
%span
......@@ -22,12 +22,13 @@
= number_with_delimiter(group.users.count)
= image_tag group_icon(group), class: "avatar s40 hidden-xs"
= link_to group, class: 'group-name title' do
= group.name
.title
= link_to group, class: 'group-name' do
= group.name
- if group_member
as
%span #{group_member.human_access}
- if group_member
as
%span #{group_member.human_access}
- if group.description.present?
.description
......
app/views/shared/projects/_project.html.haml
View file @ 5203a984
......@@ -7,26 +7,11 @@
- show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && project.commit
- css_class += " no-description" if project.description.blank? && !show_last_commit_as_description
- ci_commit = project.ci_commit(project.commit.sha) if ci && !project.empty_repo? && project.commit
- cache_key = [project.namespace, project, controller.controller_name, controller.action_name, current_application_settings, 'v2.2']
- cache_key = [project.namespace, project, controller.controller_name, controller.action_name, current_application_settings, 'v2.3']
- cache_key.push(ci_commit.status) if ci_commit
%li.project-row{ class: css_class }
= cache(cache_key) do
= link_to project_path(project), class: dom_class(project) do
- if avatar
.dash-project-avatar
- if use_creator_avatar
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name.title
%span.namespace-name
- if project.namespace && !skip_namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
.controls
- if project.main_language
%span
......@@ -45,6 +30,23 @@
%span.visibility-icon.has_tooltip{data: { container: 'body', placement: 'left' },
title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"}
= visibility_level_icon(project.visibility_level, fw: false)
.title
= link_to project_path(project), class: dom_class(project) do
- if avatar
.dash-project-avatar
- if use_creator_avatar
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name
%span.namespace-name
- if project.namespace && !skip_namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
- if show_last_commit_as_description
.description
= link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
......
app/views/shared/snippets/_snippet.html.haml
View file @ 5203a984
%li.snippet-row
= image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: ''
.snippet-title
= link_to reliable_snippet_path(snippet), class: 'title' do
.title
= link_to reliable_snippet_path(snippet) do
= truncate(snippet.title, length: 60)
- if snippet.private?
%span.label.label-gray
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7