[FINNA-2739] Unify confirm button styles and remove local adjustments (…

…#3083)
NatLibFi · Dec 10, 2024 · 1c4d746 · 1c4d746
1 parent b831c20
commit 1c4d746
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 141 deletions.
diff --git a/themes/finna2/scss/components.scss b/themes/finna2/scss/components.scss
@@ -9,3 +9,4 @@
 @import 'components/finna-multi-level-nav';
 @import 'components/finna-navbar';
 @import 'components/finna-md-editable';
+@import 'components/confirm-button';
diff --git a/themes/finna2/scss/components/confirm-button.scss b/themes/finna2/scss/components/confirm-button.scss
@@ -0,0 +1,24 @@
+.vc-confirm-button.btn-group {
+  position: relative;
+  display: inline-block;
+  padding: 0 0 4px 4px;
+  &.open {
+    > .dropdown-menu {
+      position: absolute;
+      border-radius: $finna-button-radius;
+      border: 1px solid $gray-lighter;
+      top: 100%;
+      > li {
+        border: none;
+        border-bottom: 1px solid $gray-lighter;
+        > a {
+          margin: initial;
+        }
+        > .dropdown-header {
+          color: inherit;
+          font-size: $content-font-size-base;
+        }
+      }
+    }
+  }
+}
diff --git a/themes/finna2/scss/finna/mylist.scss b/themes/finna2/scss/finna/mylist.scss
@@ -37,6 +37,54 @@
 }
 
 .mylist-bar, .reservationlist-bar {
+  > .dropdown-menu {
+    float: none;
+    position: relative;
+    top: initial;
+    left: initial;
+    border-left: none;
+    border-right: none;
+    @include box-shadow(none);
+    padding: 0;
+    .active a {
+      font-weight: 600;
+      text-decoration: none;
+      color: $dropdown-link-color;;
+      background-color: $gray-ultralight;
+    }
+    > li {
+      max-width: none;
+      border: none;
+
+      > a {
+        padding: 3px 20px;
+        &.active {
+          font-weight: bold;
+          background-color: $gray-ultralight;
+        }
+      }
+      > a:not(.add-new-list) {
+        color: $text-color;
+      }
+      .favorite-list-holder {
+        height: 25px;
+        .favorite-list-title {
+          max-width: 60%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-right: 5px;
+        }
+
+        .public-favorite-list {
+          padding: 2px;
+          &:before {
+            line-height: 19px;
+          }
+        }
+      }
+    }
+  }
   h4.visible-xs.visible-sm {
     text-transform: none;
   }
@@ -62,46 +110,12 @@
     a {
       padding: 2px;
     }
-
     .list-visibility-hidden {
       margin-left: 10px;
       margin-bottom: 5px;
     }
   }
 
-  li {
-    max-width: none;
-
-    > a {
-      padding: 3px 20px;
-      &.active {
-        font-weight: bold;
-        background-color: $gray-ultralight;
-      }
-    }
-    > a:not(.add-new-list) {
-      color: $text-color;
-    }
-    .favorite-list-holder {
-      height: 25px;
-
-      .favorite-list-title {
-        max-width: 60%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-right: 5px;
-      }
-
-      .public-favorite-list {
-        padding: 2px;
-        &:before {
-          line-height: 19px;
-        }
-      }
-    }
-  }
-
   .add-new-list-holder {
     padding: 0 20px;
     margin: 5px 0 10px 0px;
@@ -541,20 +555,3 @@ span.caret {
     margin-top: 10px;
   }
 }
-
-.delete-list-btn-wrapper {
-  position: relative;
-  padding: 0 0 4px 4px;
-  .btn-group.open {
-    .dropdown-menu {
-      position: absolute;
-      border-radius: 4px;
-      border: 1px solid $gray-lighter;
-      top: 100%;
-    }
-    .dropdown-header {
-      color: inherit;
-      font-size: 14px;
-    }
-  }
-}
diff --git a/themes/finna2/scss/finna/myresearch.scss b/themes/finna2/scss/finna/myresearch.scss
@@ -757,49 +757,16 @@ form#renewals, form#update_holds, form#purge_history {
   display: block;
   z-index: 2;
   margin-top: 15px;
-
   .status {
     padding-left: 5px;
   }
-  .dropdown-menu {
-    border-left: none;
-    border-right: none;
-    @include box-shadow(none);
-    padding: 0;
-    > li {
-      border: none;
-    }
-    .active a {
-      font-weight: 600;
-      text-decoration: none;
-      color: $dropdown-link-color;;
-      background-color: $gray-ultralight;
-    }
-  }
   @media (min-width: $screen-md) {
     &.move-list {
       position: -webkit-sticky;
       position: sticky;
       top: 30px;
     }
   }
-  .subtabs.mylist-nav {
-    border-top-width: 0px;
-    li.hidden-xs.hidden-sm, li.mylist-menu-favorites {
-      max-width: none;
-      h4 {
-        text-transform: none;
-        @media (max-width: $screen-sm-max) {
-          text-align: center;
-        }
-      }
-    }
-    li:first-child {
-      a {
-        padding-top: 9px;
-      }
-    }
-  }
 
   &.list-group {
     border-radius: 4px;

diff --git a/themes/finna2/scss/finna/tabs.scss b/themes/finna2/scss/finna/tabs.scss
@@ -183,7 +183,7 @@
 .useraccount-nav.nav-tabs {
   border-bottom: none;
   // style 5 tabs to make sure they stay as tabs
-  li:first-child:nth-last-child(5), li:first-child:nth-last-child(5) ~ li {
+  > li:first-child:nth-last-child(5), li:first-child:nth-last-child(5) ~ li {
     @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
       max-width: 100%;
     }
@@ -238,13 +238,6 @@
   visibility: hidden;
 }
 
-.useraccount-nav.nav-tabs .dropdown-menu {
-  float: none;
-  position: relative;
-  top: initial;
-  left: initial;
-}
-
 .recordTabs.nav {
   margin-top: 20px;
   .staff-view-icon {

diff --git a/themes/finna2/templates/librarycards/home.phtml b/themes/finna2/templates/librarycards/home.phtml
@@ -81,18 +81,20 @@
                   <?php if ($this->auth()->getManager()->allowsUserIlsLogin()): ?>
                     <a class="btn-link edit-library-card" href="<?=$this->url('editLibraryCard') . $this->escapeHtmlAttr($record['id']) ?>" title="<?=$this->transEsc('Edit Library Card')?>"><?=$this->icon('library-card-edit') ?> <?=$this->transEsc('Update Card Details')?></a>
                   <?php endif; ?>
-                  <div class="dropdown delete-library-card">
-                    <a class="btn-link dropdown-toggle" data-toggle="dropdown" href="<?=$this->escapeHtmlAttr($this->url('librarycards-deletecard', [], ['query' => ['cardID' => $record['id']]]))?>">
-                      <?=$this->icon('library-card-disconnect') ?> <?=$this->transEsc('Disconnect Library Card')?>
-                    </a>
-                    <ul class="dropdown-menu useraccount-confirm">
-                      <li class="disabled"><a><?=$this->transEsc('Disconnect Library Card')?>?</a></li>
-                      <li>
-                        <a href="<?=$this->escapeHtmlAttr($this->url('librarycards-deletecard', [], ['query' => ['cardID' => $record['id'], 'confirm' => 1]]))?>" data-clear-account-cache><?=$this->transEsc('confirm_dialog_yes')?></a>
-                        <a href="#"><?=$this->transEsc('confirm_dialog_no')?></a>
-                      </li>
-                    </ul>
-                  </div>
+                  <?=
+                    $this->component(
+                        'confirm-button',
+                        [
+                          'buttonLink' => $this->url('librarycards-deletecard', [], ['query' => ['cardID' => $record['id']]]),
+                          'buttonLabelHtml' => $this->icon('library-card-disconnect') . ' ' . $this->translate('Disconnect Library Card'),
+                          'buttonClass' => 'btn-link',
+                          'confirmLink' => $this->url('librarycards-deletecard', [], ['query' => ['cardID' => $record['id'], 'confirm' => 1]]),
+                          'header' => 'confirm_delete_library_card_brief',
+                          'clearAccountCache' => true,
+                          'align' => 'right',
+                        ]
+                    );
+                  ?>
                 </div>
               </td>
             </tr>

diff --git a/themes/finna2/templates/myresearch/mylist-navi.phtml b/themes/finna2/templates/myresearch/mylist-navi.phtml
@@ -41,20 +41,18 @@
       <?php if ($active): ?>
         <?php $url = $this->url('list-page', ['lid' => $list->getId()], ['force_canonical' => true]) ?>
         <?= $this->partial('myresearch/list-visibility.phtml', ['listUrl' => $url, 'public' => $list->isPublic()]); ?>
-        <span class="delete-list-btn-wrapper">
-          <?=
-            $this->component(
-                'confirm-button',
-                [
-                  'buttonLink' => $this->url('myresearch-deletelist', [], ['query' => ['listID' => $list->getId()]]),
-                  'buttonLabel' => 'delete_list',
-                  'buttonClass' => 'btn btn-link',
-                  'confirmLink' => $this->url('myresearch-deletelist', [], ['query' => ['listID' => $list->getId(), 'confirm' => 1]]),
-                  'header' => 'confirm_delete_list_text',
-                ]
-            )
-          ?>
-        </span>
+        <?=
+          $this->component(
+              'confirm-button',
+              [
+                'buttonLink' => $this->url('myresearch-deletelist', [], ['query' => ['listID' => $list->getId()]]),
+                'buttonLabel' => 'delete_list',
+                'buttonClass' => 'btn btn-link',
+                'confirmLink' => $this->url('myresearch-deletelist', [], ['query' => ['listID' => $list->getId(), 'confirm' => 1]]),
+                'header' => 'confirm_delete_list_text',
+              ]
+          )
+        ?>
       <?php endif; ?>
     </li>
   <?php endforeach; ?>

diff --git a/themes/finna2/templates/reservationlist/displaylist.phtml b/themes/finna2/templates/reservationlist/displaylist.phtml
@@ -62,20 +62,18 @@
         <!-- Add order buttons if the list has not been ordered yet. -->
         <a href="<?=$this->escapeHtmlAttr($this->url('reservationlist-placeorder', ['id' => $this->list->getId()]))?>" class="btn btn-primary" data-lightbox><?=$this->transEsc('ReservationList::Order List')?></a>
       <?php endif; ?>
-      <span class="delete-list-btn-wrapper">
-        <?=
-          $this->component(
-              'confirm-button',
-              [
-                'buttonLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId()]]),
-                'buttonLabel' => 'delete_list',
-                'buttonClass' => 'btn btn-primary',
-                'confirmLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId(), 'confirm' => 1]]),
-                'header' => 'confirm_delete_list_text',
+      <?=
+        $this->component(
+            'confirm-button',
+            [
+              'buttonLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId()]]),
+              'buttonLabel' => 'delete_list',
+              'buttonClass' => 'btn btn-primary',
+              'confirmLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId(), 'confirm' => 1]]),
+              'header' => 'confirm_delete_list_text',
             ]
-          )
-        ?>
-      </span>
+        );
+      ?>
     </div>
     <div class="mylist-header">
     <?php if ($recordTotal > 0): ?>

diff --git a/themes/finna2/templates/reservationlist/displaylists.phtml b/themes/finna2/templates/reservationlist/displaylists.phtml
@@ -26,20 +26,18 @@
             <a href="<?= $this->url('reservationlist-displaylist', ['id' => $list->getId()])?>"><?= $this->escapeHtml($list->getTitle()) ?></a>
           </div>
           <div class="pull-right">
-            <span class="delete-list-btn-wrapper">
-              <?=
+            <?=
               $this->component(
                   'confirm-button',
                   [
-                      'buttonLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId()]]),
-                      'buttonLabel' => 'delete_list',
-                      'confirmLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId(), 'confirm' => 1]]),
-                      'header' => 'confirm_delete_list_text',
-                      'align' => 'right',
+                    'buttonLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId()]]),
+                    'buttonLabel' => 'delete_list',
+                    'confirmLink' => $this->url('reservationlist-deletelist', [], ['query' => ['listID' => $list->getId(), 'confirm' => 1]]),
+                    'header' => 'confirm_delete_list_text',
+                    'align' => 'right',
                   ]
-              )
-              ?>
-            </span>
+              );
+            ?>
           </div>
         </div>
         <div class="reservation-list-info">