Merge pull request #303 from ontoportal-lirmm/feature/add-pill-button

Feature: Add pill button

app/assets/stylesheets/components/index.scss

@@ -12,6 +12,7 @@
 @import 'input_field';
 @import 'file_input_loader';
 @import 'text_area_field';
+@import 'pill_button';
 @import "switch";
 @import "table";
 @import "concept_details";

app/assets/stylesheets/components/pill_button.scss

@@ -0,0 +1,33 @@
+.pill-button {
+    color: var(--primary-color);
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--primary-color);
+    border-radius: 32px;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-left: 10px;
+    transition: background-color ease 0.3s;
+    white-space: nowrap;
+    background-color: transparent;
+    &:focus{
+        outline: none;
+    }
+}
+
+.pill-button:hover {
+    background-color: var(--primary-color);
+    color: white !important;
+    a {
+        color: white !important;
+    }
+}
+
+.pill-button:hover svg path {
+    fill: white;
+}
+
+.pill-button svg {
+    margin-right: 10px;
+}

app/components/loader_component.rb

@@ -3,9 +3,18 @@
 class LoaderComponent < ViewComponent::Base
   include ActionView::Helpers::TagHelper
 
+  def initialize(small: false)
+    super
+    @small = small
+  end
+
+  def small_class
+    @small ? 'spinner-border-sm' : ''
+  end
+
   def call
     content_tag(:div, class: 'd-flex align-items-center flex-column') do
-      content_tag(:div, class:'spinner-border') do
+      content_tag(:div, class: "spinner-border #{small_class}") do
         content_tag(:span) do
           'Loading'
         end

app/components/ontology_subscribe_button_component.rb

@@ -1,17 +1,19 @@
 # frozen_string_literal: true
 
 class OntologySubscribeButtonComponent < ViewComponent::Base
-  def initialize(ontology_id: , subscribed: , user_id:)
+  def initialize(ontology_id:, subscribed:, user_id:, count: 0, link: 'javascript:void(0);')
     super
-    @sub_text = subscribed ? "Unsubscribe" : "Subscribe"
-    @controller_params =  {
+    @sub_text = subscribed ? 'UnWatch' : 'Watch'
+    @controller_params = {
       data: {
         controller: 'subscribe-notes',
-        'subscribe-notes-ontology-id-value':  ontology_id,
+        'subscribe-notes-ontology-id-value': ontology_id,
         'subscribe-notes-is-subbed-value': subscribed.to_s,
-        'subscribe-notes-user-id-value':  user_id,
+        'subscribe-notes-user-id-value': user_id,
         action: 'click->subscribe-notes#subscribeToNotes'
       }
     }
+    @link = link
+    @count = count
   end
 end

app/components/ontology_subscribe_button_component/ontology_subscribe_button_component.html.haml

@@ -1,6 +1,14 @@
-%span{@controller_params}
-  %a.subscribe_to_notes.btn.btn-primary{href:'javascript:void(0);'}
-    #{@sub_text} to notes emails
-  %span{style:"display: none;", 'data-subscribe-notes-target': 'loader'}
-    = image_tag("spinners/spinner_000000_16px.gif", style: "vertical-align: text-bottom; background: transparent")
+%div{@controller_params}
+  = render PillButtonComponent.new do
+    %a.d-flex.align-items-center{href: @link}
+      = inline_svg_tag "eye.svg"
+      %div
+        %span{'data-subscribe-notes-target': 'text'}
+          #{@sub_text}
+        (
+        %span{'data-subscribe-notes-target': 'count'}
+          #{@count}
+        )
+    %span{style:"display: none;", class: 'px-1', 'data-subscribe-notes-target': 'loader'}
+      = render LoaderComponent.new(small: true)
   %span.notes_sub_error{style:'color: red; display: none', 'data-subscribe-notes-target': 'error'}

app/components/ontology_subscribe_button_component/ontology_subscribe_button_component_controller.js

@@ -8,7 +8,7 @@ export default class extends Controller {
         isSubbed: Boolean,
         userId: String
     }
-    static targets = ["error", "loader"]
+    static targets = ["error", "loader", "text" ,"count"]
 
     subscribeToNotes() {
         let ontologyId = this.ontologyIdValue
@@ -30,9 +30,12 @@ export default class extends Controller {
                 this.isSubbedValue = !isSubbed
 
                 // Change button text
-                let txt = linkElement.html();
-                let newButtonText = txt.match("Unsubscribe") ? txt.replace("Unsubscribe", "Subscribe") : txt.replace("Subscribe", "Unsubscribe");
-                linkElement.html(newButtonText);
+                let txt = this.textTarget.innerHTML
+                let count = parseInt(this.countTarget.innerHTML)
+
+                let newButtonText = txt.match("UnWatch") ? txt.replace("UnWatch", "Watch") : txt.replace("Watch", "UnWatch");
+                this.textTarget.innerHTML  = newButtonText
+                this.countTarget.innerHTML  = newButtonText.match("UnWatch") ? (count + 1) :  (count - 1)
             },
             error: () => {
                 this.#hideSpinner()

app/components/pill_button_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class PillButtonComponent < ViewComponent::Base
+
+  def initialize(text: nil)
+    super
+    @text = text
+  end
+end

app/components/pill_button_component/pill_button_component.html.haml

@@ -0,0 +1,2 @@
+%button.pill-button
+  = @text || content

test/components/previews/button/pill_button_component_preview.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Button::PillButtonComponentPreview < ViewComponent::Preview
+  # @param text text
+  def default(text: 'hello')
+    render PillButtonComponent.new(text: text)
+  end
+end

test/components/previews/rounded_button_component_preview.rb → test/components/previews/button/rounded_button_component_preview.rb

@@ -1,4 +1,4 @@
-class RoundedButtonComponentPreview < ViewComponent::Preview
+class Button::RoundedButtonComponentPreview < ViewComponent::Preview
 
     # @param icon text
     # @param link text

test/components/previews/loader_component_preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class LoaderComponentPreview < ViewComponent::Preview
+  def default
+    render LoaderComponent.new
+  end
+
+  def small
+    render LoaderComponent.new(small: true)
+  end
+
+end

test/components/previews/ontology_subscribe_button_component_preview.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class OntologySubscribeButtonComponentPreview < ViewComponent::Preview
+  def default
+    render OntologySubscribeButtonComponent.new(ontology_id: '', subscribed: true, user_id: '')
+  end
+end