Merge pull request #13935 from ncounter/watch-button-to-the-right

Watch button to the top-right

src/api/app/components/watchlist_icon_component.html.haml

@@ -1,5 +1,5 @@
 - if object_to_be_watched_in_watchlist?
-  = link_to('#', class: 'btn btn-outline-secondary',
+  = link_to('#', class: 'btn btn-outline-secondary text-nowrap',
             title: "Remove #{watchable_type_text} from watchlist",
             data: { 'bs-toggle': 'modal',
                     'bs-target': '#delete-item-from-watchlist-modal',
@@ -10,7 +10,7 @@
     Unwatch
 - else
   = link_to(toggle_watchable_path, method: :put, remote: true,
-            class: 'btn btn-outline-secondary',
+            class: 'btn btn-outline-secondary text-nowrap',
             title: "Add #{watchable_type_text} to watchlist") do
     %i.far.fa-eye
     Watch

src/api/app/views/webui/package/_basic_info.html.haml

@@ -2,14 +2,6 @@
   = render partial: 'edit', locals: { package: package, project: package.project }
 
 .basic-info
-  %h3#package-title
-    = package.title.presence || package.name
-    - if User.session
-      .d-inline.ms-1#watchlist-icon-wrapper
-        = render WatchlistIconComponent.new(user: User.session!,
-                                            package: package,
-                                            project: project,
-                                            current_object: package)
   - if package.url.present?
     = link_to(package.url, package.url, class: 'mb-3 d-block')
   #description-text

src/api/app/views/webui/package/show.html.haml

@@ -19,6 +19,12 @@
 .card.mb-3
   = render partial: 'tabs', locals: { project: @project, package: @package }
   .card-body
+    .d-flex.justify-content-between.mb-2
+      %h3#package-title
+        = @package.title.presence || @package.name
+      - if User.session
+        .d-inline.ms-1#watchlist-icon-wrapper
+          = render WatchlistIconComponent.new(user: User.session!, package: @package, project: @project, current_object: @package)
     .row
       .col-md-8
         .in-place-editing

src/api/app/views/webui/package/update.js.haml

@@ -11,6 +11,7 @@ resetFormValidation();
       scrollToInPlace();
       $('.in-place-editing').html("#{escape_javascript(render(partial: 'webui/package/basic_info',
                                                               locals: { package: @package, project: @project }))}");
+      $('#package-title').html("#{@package.title.presence || @package.name}")
       setCollapsible();
       $('.in-place-editing').animate({ opacity: 1 }, 400, function() {
         $('#flash').html("#{escape_javascript(render(layout: false, partial: 'layouts/webui/flash', object: flash))}");

src/api/app/views/webui/project/_basic_info.html.haml

@@ -1,9 +1,4 @@
 .basic-info.in-place-editing
-  %h3#project-title
-    = project.title.presence || project
-    - if User.session
-      .d-inline.ms-1#watchlist-icon-wrapper
-        = render WatchlistIconComponent.new(user: User.session!, project: project, current_object: project)
   - if project.categories.any?
     - project.categories.each do |category|
       = category_badge(category)

src/api/app/views/webui/project/show.html.haml

@@ -12,6 +12,12 @@
 .card.mb-3
   = render partial: 'tabs', locals: { project: @project }
   .card-body
+    .d-flex.justify-content-between.mb-2
+      %h3#project-title
+        = @project.title.presence || @project
+      - if User.session
+        .d-inline.ms-1#watchlist-icon-wrapper
+          = render WatchlistIconComponent.new(user: User.session!, project: @project, current_object: @project)
     .row
       .col-md-8
         = render partial: 'basic_info', locals: { project: @project }

src/api/app/views/webui/project/update.js.haml

@@ -10,6 +10,7 @@ resetFormValidation();
     }, 400, function() {
       scrollToInPlace();
       $('.in-place-editing').html("#{escape_javascript(render(partial: 'webui/project/basic_info', locals: { project: @project }))}");
+      $('#project-title').html("#{@project.title.presence || @project}")
       setCollapsible();
       $('.in-place-editing').animate({ opacity: 1 }, 400, function() {
         $('#flash').html("#{escape_javascript(render(layout: false, partial: 'layouts/webui/flash', object: flash))}");

src/api/app/views/webui/request/beta_show.html.haml

@@ -25,19 +25,20 @@
 
 .card
   .card-body.p-0
-    %h3.card-title.pt-4.px-4
-      Request #{@bs_request.number}
-      %span.badge.ms-2{ class: "bg-#{request_badge_color(@bs_request.state)}" }>
-        = @bs_request.state
-        - if @bs_request.superseded_by.present?
-          by
-          = link_to(@bs_request.superseded_by, { number: @bs_request.superseded_by }, class: 'link-light')
-      - if @staging_status
-        - staging_title = @staging_status[:title]
-        - staging_title[0].capitalize
-        = link_to @staging_status[:name], @staging_status[:url], title: staging_title, class: 'badge badge-staging ms-2'
-      - if @bs_request.accept_at.present?
-        %span.badge.alert.alert-warning.border-0.ms-2.mb-0.p-2 auto-accept
+    .d-flex.justify-content-between.mb-2.pt-4.px-4
+      %h3.card-title
+        Request #{@bs_request.number}
+        %span.badge.ms-2{ class: "bg-#{request_badge_color(@bs_request.state)}" }>
+          = @bs_request.state
+          - if @bs_request.superseded_by.present?
+            by
+            = link_to(@bs_request.superseded_by, { number: @bs_request.superseded_by }, class: 'link-light')
+        - if @staging_status
+          - staging_title = @staging_status[:title]
+          - staging_title[0].capitalize
+          = link_to @staging_status[:name], @staging_status[:url], title: staging_title, class: 'badge badge-staging ms-2'
+        - if @bs_request.accept_at.present?
+          %span.badge.alert.alert-warning.border-0.ms-2.mb-0.p-2 auto-accept
       - if User.session
         .d-inline.align-bottom.ms-1#watchlist-icon-wrapper
           = render WatchlistIconComponent.new(user: User.session!, bs_request: @bs_request, current_object: @bs_request)