From b0591ff03a11eff7d7bee9aab67cd73b80fe9105 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 10 Dec 2015 19:03:48 +0100 Subject: [PATCH] Redesign issue page for new sidebar Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/pages/issuable.scss | 166 +++++++----------- .../projects/issues/_discussion.html.haml | 23 +-- app/views/projects/issues/show.html.haml | 47 +++-- app/views/projects/issues/update.js.haml | 4 +- app/views/shared/issuable/_context.html.haml | 57 ------ .../shared/issuable/_participants.html.haml | 8 +- 6 files changed, 102 insertions(+), 203 deletions(-) delete mode 100644 app/views/shared/issuable/_context.html.haml diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 957da5c182..35af92e7df 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -24,20 +24,6 @@ } } -.issuable-context-title { - margin-bottom: 5px; - - .avatar { - margin-left: 0; - } - - label { - color: $gl-gray; - font-weight: normal; - margin-right: 4px; - } -} - .project-issuable-filter { .controls { float: right; @@ -50,23 +36,6 @@ } .issuable-details { - .page-title { - margin-top: -$gl-padding; - padding: 7px 0; - margin-bottom: 0; - color: #5c5d5e; - font-size: 16px; - line-height: 42px; - - .author { - color: #5c5d5e; - } - - .issue-id { - color: #5c5d5e; - } - } - .issue-title { margin: 0; font-size: 23px; @@ -80,6 +49,20 @@ margin-bottom: 0; } } + + section { + border-right: 1px solid #ECEEF1; + + > .tab-content { + margin-right: 1px; + } + + > .gray-content-block { + margin-top: 0; + border-top: none; + margin-right: -15px; + } + } } .issuable-filter-count { @@ -101,84 +84,67 @@ } } -.cross-project-reference { - text-align: center; - width: 100%; +.issuable-sidebar { + .block { + @include clearfix; + padding: $gl-padding 0; + border-bottom: 1px solid #F0F0F0; - .slead { - padding: 5px; - } - - span, button { - background-color: $background-color; - } -} - -.awards { - @include clearfix; - line-height: 34px; - margin: 2px 0; - - .award { - @include border-radius(5px); - - border: 1px solid; - padding: 0px 10px; - float: left; - margin: 0 5px; - border-color: $border-color; - cursor: pointer; - - &.active { - border-color: $border-gray-light; - background-color: $gray-light; - - .counter { - font-weight: bold; - } - } - - .icon { - float: left; - margin-right: 10px; - } - - .counter { - float: left; + &:last-child { + border: none; } } - .awards-controls { - margin-left: 10px; - float: left; + .title { + color: $gl-text-color; + margin-bottom: 8px; - .add-award { - font-size: 24px; + .avatar { + margin-left: 0; + } + + label { + font-weight: normal; + margin-right: 4px; + } + + .edit-link { color: $gl-gray; - position: relative; - top: 2px; - - &:hover, - &:link { - text-decoration: none; - } - } - - .awards-menu { - padding: $gl-padding; - min-width: 214px; - - > li { - cursor: pointer; - margin: 5px; - } } } - .awards-menu{ - li { - float: left; - margin: 3px; + .cross-project-reference { + font-weight: bold; + color: $gl-link-color; + + button { + float: right; } } + + .selectbox { + display: none + } + + .btn-clipboard { + color: $gl-gray; + } +} + +.issuable-title { + margin: -$gl-padding; + padding: 7px $gl-padding; + margin-bottom: 0px; + border-bottom: 1px solid $border-color; + color: #5c5d5e; + font-size: 16px; + line-height: 42px; + + .author { + color: #5c5d5e; + } + + .issuable-id { + color: #5c5d5e; + } } diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml index f2011542ca..86d3dc546b 100644 --- a/app/views/projects/issues/_discussion.html.haml +++ b/app/views/projects/issues/_discussion.html.haml @@ -5,24 +5,5 @@ - else = link_to 'Close Issue', issue_path(@issue, issue: {state_event: :close}, status_only: true), method: :put, class: 'btn btn-grouped btn-close js-note-target-close', title: 'Close Issue' -= render 'shared/show_aside' - -.gray-content-block.second-block.oneline-block - .row - .col-md-9 - .votes-holder.pull-right - #votes= render 'votes/votes_block', votable: @issue - = render "shared/issuable/participants" - .col-md-3 - .input-group.cross-project-reference - %span#cross-project-reference.slead.has_tooltip{title: 'Cross-project reference'} - = cross_project_reference(@project, @issue) - = clipboard_button(clipboard_target: 'span#cross-project-reference') - -.row - %section.col-md-9 - .voting_notes#notes= render 'projects/notes/notes_with_form' - %aside.col-md-3 - .issuable-affix - .context - = render 'shared/issuable/context', issuable: @issue +#notes + = render 'projects/notes/notes_with_form' diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 38254403fa..79c9ef6b3c 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -3,13 +3,13 @@ .issue .issue-details.issuable-details - .page-title + .issuable-title .issue-box{ class: issue_box_class(@issue) } - if @issue.closed? Closed - else Open - %span.issue-id Issue ##{@issue.iid} + %span.issuable-id Issue ##{@issue.iid} %span.creator · opened by #{link_to_member(@project, @issue.author, size: 24)} @@ -36,22 +36,31 @@ = icon('pencil-square-o') Edit - .gray-content-block.middle-block - %h2.issue-title - = markdown escape_once(@issue.title), pipeline: :single_line - %div - - if @issue.description.present? - .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''} - .wiki - = preserve do - = markdown(@issue.description, cache_key: [@issue, "description"]) - %textarea.hidden.js-task-list-field - = @issue.description + .row + %section.col-md-9 + .gray-content-block + %h2.issue-title + = markdown escape_once(@issue.title), pipeline: :single_line + %div + - if @issue.description.present? + .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''} + .wiki + = preserve do + = markdown(@issue.description, cache_key: [@issue, "description"]) + %textarea.hidden.js-task-list-field + = @issue.description - .merge-requests - = render 'merge_requests' + .merge-requests + = render 'merge_requests' - - if @closed_by_merge_requests.present? - = render 'projects/issues/closed_by_box' - .issue-discussion - = render 'projects/issues/discussion' + = render 'votes/votes_block', votable: @issue + + - if @closed_by_merge_requests.present? + = render 'projects/issues/closed_by_box' + .issue-discussion + = render 'projects/issues/discussion' + + %aside.col-md-3 + = render 'shared/issuable/sidebar', issuable: @issue + + = render 'shared/show_aside' diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml index b7735aaf3c..2f0f3fcfb0 100644 --- a/app/views/projects/issues/update.js.haml +++ b/app/views/projects/issues/update.js.haml @@ -1,3 +1,3 @@ -$('.context').html("#{escape_javascript(render 'shared/issuable/context', issuable: @issue)}"); -$('.context').effect('highlight') +$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"); +$('.issuable-sidebar').parent().effect('highlight') new Issue(); diff --git a/app/views/shared/issuable/_context.html.haml b/app/views/shared/issuable/_context.html.haml deleted file mode 100644 index 2aa4666261..0000000000 --- a/app/views/shared/issuable/_context.html.haml +++ /dev/null @@ -1,57 +0,0 @@ -= form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| - %div.prepend-top-default - .issuable-context-title - %label - Assignee: - - if issuable.assignee - %strong= link_to_member(@project, issuable.assignee, size: 24) - - else - none - .issuable-context-selectbox - - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) - = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true) - - %div.prepend-top-default.clearfix - .issuable-context-title - %label - Milestone: - - if issuable.milestone - %span.back-to-milestone - = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do - %strong - = icon('clock-o') - = issuable.milestone.title - - else - none - .issuable-context-selectbox - - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) - = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }}) - = hidden_field_tag :issuable_context - = f.submit class: 'btn hide' - - - if issuable.labels.any? - %div.prepend-top-default.clearfix - .issuable-context-title - %label Labels - .issuable-show-labels - - issuable.labels.each do |label| - = link_to_label(label) - - - if current_user - - subscribed = issuable.subscribed?(current_user) - %div.prepend-top-default.clearfix - .issuable-context-title - %label Subscription - - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed' - .subscription-status{data: {status: subscribtion_status}} - .description-block.unsubscribed{class: ( 'hidden' if subscribed )} - You're not receiving notifications from this thread. - .description-block.subscribed{class: ( 'hidden' unless subscribed )} - You're receiving notifications because you're subscribed to this thread. - %button.btn.btn-block.subscribe-button{:type => 'button'} - = icon('eye') - %span= subscribed ? 'Unsubscribe' : 'Subscribe' - -:javascript - new Subscription("#{toggle_subscription_path(issuable)}"); - new IssuableContext(); diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml index b4e0def48b..da6bacbb74 100644 --- a/app/views/shared/issuable/_participants.html.haml +++ b/app/views/shared/issuable/_participants.html.haml @@ -1,5 +1,5 @@ -.participants - %span - = pluralize @participants.count, "participant" - - @participants.each do |participant| +.block.participants + .title + = pluralize participants.count, "participant" + - participants.each do |participant| = link_to_member(@project, participant, name: false, size: 24)