Restyle My page

9 years ago · 07c23537eb
parent e33b6abc45
commit 07c23537eb
16 changed files with 124 additions and 90 deletions
--- a/app/assets/stylesheets/content/_my_page.sass
+++ b/app/assets/stylesheets/content/_my_page.sass
@ -26,6 +26,8 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++

+
+
 #content
  .mypage-box
    @include content-box
@ -38,6 +40,15 @@
      table, td, th
        border: none

+.my-page--container
+
+  #list-left,
+  #list-right
+    @extend .medium-6
+
+.handle
+  cursor: move
+
 div.box-actions
  float: right
  margin-right: 16px
@ -82,9 +93,6 @@ div.box-actions
    margin-top: 8px
    padding-bottom: 8px

-  div.mypage-box div.box-actions
-    margin-top: -60px
-
 div.mypage-box p.summary
  font-style: normal

--- a/app/assets/stylesheets/content/_table.sass
+++ b/app/assets/stylesheets/content/_table.sass
@ -57,6 +57,9 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
    x: hidden
    y: auto

+.generic-table--action-buttons
+  margin-top: 3rem
+
 #generic-table
  tr.issue
    &.ng-enter, &.ng-move
--- a/app/assets/stylesheets/content/_widget_box.sass
+++ b/app/assets/stylesheets/content/_widget_box.sass
@ -37,8 +37,20 @@ $widget-box--enumeration-width: 20px
  margin-left: 10px

 .widget-boxes
-  display: flex
-  flex-flow: row wrap
+
+  &.-flex
+    display: flex
+    flex-flow: row wrap
+
+    .widget-box
+      flex: 1
+      flex-basis: 32%
+      display: flex
+      flex-direction: column
+
+    .widget-box--enumeration,
+    .widget-box--arrow-links
+      flex-grow: 2

  .icon-context:before
    padding-right: 5px
@ -46,12 +58,8 @@ $widget-box--enumeration-width: 20px
  .widget-box
    @include widget-box--style
    padding: 10px 10px 10px 20px
-    flex: 1
-    flex-basis: 32%
-    display: flex
-    flex-direction: column
    min-height: 250px
-    word-wrap: break-words
+    word-wrap: break-word
    overflow: hidden

    .widget-box--header
@ -76,12 +84,10 @@ $widget-box--enumeration-width: 20px
    .widget-box--enumeration
      margin-left: 1.5rem
      margin-top: 0.5rem
-      flex-grow: 2

    .widget-box--arrow-links
      list-style: none
      margin: 0.5rem 0 1rem 0
-      flex-grow: 2

      li:before
        @include icon-common
@ -106,3 +112,4 @@ $widget-box--enumeration-width: 20px
          margin-bottom: 10px
          //necessary for correct alignment even with long texts
          width: calc(100% - #{$widget-box--enumeration-width})
+
--- a/app/views/homescreen/index.html.erb
+++ b/app/views/homescreen/index.html.erb
@ -35,7 +35,7 @@ See doc/COPYRIGHT.rdoc for more details.
 </div>

 <% if @homescreen[:blocks].any? %>
-  <section class="widget-boxes">
+  <section class="widget-boxes -flex">
  <% @homescreen[:blocks].each do |block| %>
    <% if block[:if].nil? || instance_eval(&block[:if]) %>
      <div class="widget-box">
--- a/app/views/my/_block.html.erb
+++ b/app/views/my/_block.html.erb
@ -27,7 +27,7 @@ See doc/COPYRIGHT.rdoc for more details.

 ++#%>

-<div id="block_<%= block_name.dasherize %>" class="mypage-box">
+<div id="block_<%= block_name.dasherize %>" class="widget-box mypage-box">

  <% content_for "#{block_name}_remove_block" do %>
    <div class="box-actions">
--- a/app/views/my/_block_container.html.erb
+++ b/app/views/my/_block_container.html.erb
@ -0,0 +1,14 @@
+<% unless blocks.nil? || blocks.empty? %>
+  <section class="widget-boxes ">
+    <% blocks.each do |block_name| %>
+      <% next unless MyController.available_blocks.keys.include? block_name %>
+      <% if edit %>
+        <%= render partial: "my/block", locals: { block_name: block_name, user: @user } %>
+      <% else %>
+        <div class="widget-box">
+          <%= render partial: "my/blocks/#{block_name}", locals: { user: @user } %>
+        </div>
+      <% end %>
+    <% end %>
+  </section>
+<% end %>
--- a/app/views/my/blocks/_calendar.html.erb
+++ b/app/views/my/blocks/_calendar.html.erb
@ -27,12 +27,15 @@ See doc/COPYRIGHT.rdoc for more details.

 ++#%>

-<h3><%= l(:label_calendar) %></h3>
-
 <% if defined? block_name %>
  <%= content_for "#{block_name}_remove_block" %>
 <% end %>

+<h3 class="widget-box--header">
+  <span class="icon-context icon-calendar"></span>
+  <span class="widget-box--header-title"><%=l(:label_calendar)%></span>
+</h3>
+
 <% calendar = Redmine::Helpers::Calendar.new(Date.today, current_language, :week)
   calendar.events = calendar_items(calendar.startdt, calendar.enddt) %>

--- a/app/views/my/blocks/_issuesassignedtome.html.erb
+++ b/app/views/my/blocks/_issuesassignedtome.html.erb
@ -26,24 +26,26 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See doc/COPYRIGHT.rdoc for more details.

 ++#%>
-<h3><%=l(:label_assigned_to_me_work_packages)%> (<%= wps_assigned_to_me_count %>)</h3>

 <% if defined? block_name %>
  <%= content_for "#{block_name}_remove_block" %>
 <% end %>

+<h3 class="widget-box--header">
+  <span class="icon-context icon-issue-assignedtome"></span>
+  <span class="widget-box--header-title"><%=l(:label_assigned_to_me_work_packages)%> (<%= wps_assigned_to_me_count %>)</span>
+</h3>
+
 <%= render partial: 'work_packages/list_simple',
-           locals: {
-                        work_packages: wps_assigned_to_me,
-                        list_for: :assigned
-                      } %>
+           locals: { work_packages: wps_assigned_to_me, list_for: :assigned } %>

 <% if wps_assigned_to_me_count > 0 %>
-  <p class="small">
+  <div class="generic-table--action-buttons">
    <%= link_to l(:label_work_package_view_all_assigned_to_me),
                work_packages_assigned_to_me_path,
                class: 'button -highlight' %>
-  </p>
+
+  </div>
 <% end %>
 <% content_for :header_tags do %>
  <%= auto_discovery_link_tag(:atom,
--- a/app/views/my/blocks/_issuesreportedbyme.html.erb
+++ b/app/views/my/blocks/_issuesreportedbyme.html.erb
@ -32,7 +32,10 @@ See doc/COPYRIGHT.rdoc for more details.
                                 .order("#{WorkPackage.table_name}.updated_at DESC")
 %>

-<h3><%=l(:label_reported_work_packages)%> (<%= @user.reported_work_package_count %>)</h3>
+<h3 class="widget-box--header">
+  <span class="icon-context icon-issue-reportedbyme"></span>
+  <span class="widget-box--header-title"><%=l(:label_reported_work_packages)%> (<%= @user.reported_work_package_count %>)</span>
+</h3>

 <% if defined? block_name %>
  <%= content_for "#{block_name}_remove_block" %>
@ -45,11 +48,11 @@ See doc/COPYRIGHT.rdoc for more details.
                      } %>

 <% if reported.length > 0 %>
-  <p class="small">
+  <div class="generic-table--action-buttons">
    <%= link_to l(:label_work_package_view_all_reported_by_me),
                work_packages_reported_by_me_path,
                class: 'button -highlight' %>
-  </p>
+  </div>
 <% end %>
 <% content_for :header_tags do %>
  <%= auto_discovery_link_tag(:atom,
--- a/app/views/my/blocks/_issueswatched.html.erb
+++ b/app/views/my/blocks/_issueswatched.html.erb
@ -31,7 +31,10 @@ See doc/COPYRIGHT.rdoc for more details.

 <% watched_count = WorkPackage.visible.open.watched_by(user.id).count %>

-<h3><%=l(:label_watched_work_packages)%> (<%= watched_count %>)</h3>
+<h3 class="widget-box--header">
+  <span class="icon-context icon-issue-watched"></span>
+  <span class="widget-box--header-title"><%=l(:label_watched_work_packages)%> (<%= watched_count %>)</span>
+</h3>

 <% if defined? block_name %>
  <%= content_for "#{block_name}_remove_block" %>
@ -44,9 +47,9 @@ See doc/COPYRIGHT.rdoc for more details.
                      } %>

 <% if watched.length > 0 %>
-  <p class="small">
+  <div class="generic-table--action-buttons">
    <%= link_to l(:label_work_package_view_all_watched),
                work_packages_watched_path,
                class: 'button -highlight' %>
-  </p>
+  </div>
 <% end %>
--- a/app/views/my/blocks/_news.html.erb
+++ b/app/views/my/blocks/_news.html.erb
@ -31,16 +31,30 @@ See doc/COPYRIGHT.rdoc for more details.
              .where("#{News.table_name}.project_id in (#{@user.projects.collect{|m| m.id}.join(',')})")
              .includes(:project, :author) unless @user.projects.empty? %>

-<h3><%=l(:label_news_latest)%></h3>
-
 <% if defined? block_name %>
  <%= content_for "#{block_name}_remove_block" %>
 <% end %>

-<% if news %>
-  <%= render(partial: 'news/news',
-             collection: news)
-  %>
-<% else %>
+<h3 class="widget-box--header">
+  <span class="icon-context icon-news"></span>
+  <span class="widget-box--header-title"><%= l(:label_news_latest) %></span>
+</h3>
+
+<% news = News.latest(count: 3) %>
+<% if news.empty? %>
  <%= no_results_box(custom_title: t('news.my_page.no_results_title_text')) %>
+<% unless news.empty? %>
+  <ul class="widget-box--arrow-links">
+  <% news.each do |news| %>
+    <li class="-widget-box--arrow-multiline">
+      <div>
+        <%= avatar(news.author, {class: 'avatar-mini'}) %>
+        <%= link_to_project(news.project) + ': ' %>
+        <%= link_to h(news.title), news_path(news) %>
+        <br/>
+        <p class="widget-box--additional-info"><%= authoring news.created_on, news.author %></p>
+      </div>
+    </li>
+  <% end %>
+  </ul>
 <% end %>
--- a/app/views/my/blocks/_timelog.html.erb
+++ b/app/views/my/blocks/_timelog.html.erb
@ -27,7 +27,10 @@ See doc/COPYRIGHT.rdoc for more details.

 ++#%>

-<h3><%=l(:label_spent_time)%> (<%= l(:label_last_n_days, 7) %>)</h3>
+<h3 class="widget-box--header">
+  <span class="icon-context icon-time"></span>
+  <span class="widget-box--header-title"><%=l(:label_spent_time)%> (<%= l(:label_last_n_days, 7) %>)</span>
+</h3>

 <% if defined? block_name %>
  <%= content_for "#{block_name}_remove_block" %>
--- a/app/views/my/blocks/_workpackagesresponsiblefor.html.erb
+++ b/app/views/my/blocks/_workpackagesresponsiblefor.html.erb
@ -36,24 +36,25 @@ See doc/COPYRIGHT.rdoc for more details.

 <% responsible_count = WorkPackage.visible.open.where(responsible_id: User.current.id).count %>

-<h3><%=l(:label_responsible_for_work_packages)%> (<%= responsible_count %>)</h3>
-
 <% if defined? block_name %>
  <%= content_for "#{block_name}_remove_block" %>
 <% end %>

+<h3 class="widget-box--header">
+  <span class="icon-context icon-issue-assignedtome"></span>
+  <span class="widget-box--header-title"><%=l(:label_responsible_for_work_packages)%> (<%= responsible_count %>)</span>
+</h3>
+
 <%= render partial: 'work_packages/list_simple',
-           locals: {
-                        work_packages: responsible,
-                        list_for: :responsible
-                      } %>
+           locals: { work_packages: responsible, list_for: :responsible} %>

 <% if responsible.length > 0 %>
-  <p class="small">
+  <div class="generic-table--action-buttons">
    <%= link_to l(:label_work_package_view_all_responsible_for),
                work_packages_responsible_for_path,
                class: 'button -highlight' %>
-  </p>
+
+  </div>
 <% end %>
 <% content_for :header_tags do %>
  <%= auto_discovery_link_tag(:atom,
--- a/app/views/my/page.html.erb
+++ b/app/views/my/page.html.erb
@ -35,34 +35,17 @@ See doc/COPYRIGHT.rdoc for more details.
    <% end %>
  </li>
 <% end %>
-<div id="invisible-grid">
-  <div class="grid-block">
-    <div id="list-top" class="grid-content">
-      <% @blocks['top'].each do |b|
-         next unless MyController.available_blocks.keys.include? b  %>
-        <div class="container">
-          <%= render partial: "my/blocks/#{b}", locals: { user: @user } %>
-        </div>
-      <% end if @blocks['top'] %>
-    </div>
+<div class="my-page--container">
+  <div id="list-top">
+    <%= render partial: 'block_container', locals: { edit: false, blocks: @blocks['top'] } %>
  </div>
  <div class="grid-block">
-    <div id="list-left" class="grid-content left">
-      <% @blocks['left'].each do |b|
-         next unless MyController.available_blocks.keys.include? b %>
-        <div class="container">
-          <%= render partial: "my/blocks/#{b}", locals: { user: @user } %>
-        </div>
-      <% end if @blocks['left'] %>
-    </div>
-    <div id="list-right" class="grid-content right">
-      <% @blocks['right'].each do |b|
-         next unless MyController.available_blocks.keys.include? b %>
-        <div class="container">
-          <%= render partial: "my/blocks/#{b}", locals: { user: @user } %>
-        </div>
-      <% end if @blocks['right'] %>
+  <% %w(left right).each do |position| %>
+    <div id="list-<%= position %>">
+      <%= render partial: 'block_container', locals: { edit: false, blocks: @blocks[position] } %>
    </div>
+  <% end %>
  </div>
 </div>
+
 <% html_title(l(:label_my_page)) -%>
--- a/app/views/my/page_layout.html.erb
+++ b/app/views/my/page_layout.html.erb
@ -92,30 +92,19 @@ See doc/COPYRIGHT.rdoc for more details.
 <% end %>

 <h4><%=l(:label_visible_elements) %></h4>
-<div id="visible-grid">
-  <div class="grid-block">
-    <div id="list-top" class="grid-content block-receiver">
-      <% @blocks['top'].each do |b|
-         next unless MyController.available_blocks.keys.include? b %>
-        <%= render partial: 'block', locals: {user: @user, block_name: b} %>
-      <% end if @blocks['top'] %>
-    </div>
+<div class="my-page--container -visible-grid">
+  <div id="list-top" class="grid-content block-receiver">
+    <%= render partial: 'block_container', locals: { edit: true, blocks: @blocks['top'] } %>
  </div>
  <div class="grid-block">
-    <div id="list-left" class="grid-content block-receiver left">
-      <% @blocks['left'].each do |b|
-         next unless MyController.available_blocks.keys.include? b %>
-        <%= render partial: 'block', locals: {user: @user, block_name: b} %>
-      <% end if @blocks['left'] %>
-    </div>
-    <div id="list-right" class="grid-content block-receiver right">
-      <% @blocks['right'].each do |b|
-         next unless MyController.available_blocks.keys.include? b %>
-        <%= render partial: 'block', locals: {user: @user, block_name: b} %>
-      <% end if @blocks['right'] %>
-    </div>
+    <% %w(left right).each do |position| %>
+        <div id="list-<%= position %>" class="grid-content block-receiver">
+          <%= render partial: 'block_container', locals: { edit: true, blocks: @blocks[position] } %>
+        </div>
+    <% end %>
  </div>
 </div>
+
 <%= sortable_element 'list-top',
      tag: 'div',
      only: 'mypage-box',
--- a/config/routes.rb
+++ b/config/routes.rb
@ -539,6 +539,7 @@ OpenProject::Application.routes.draw do
  scope controller: 'my' do
    post '/my/add_block', action: 'add_block'
    post '/my/remove_block', action: 'remove_block'
+    post '/my/order_blocks', action: 'order_blocks'
    get '/my/page_layout', action: 'page_layout'
    get '/my/password', action: 'password'
    post '/my/change_password', action: 'change_password'