Merge pull request #3827 from OpenLiberty/staging

Update Prod

src/main/content/_assets/css/guide-common.scss

@@ -569,3 +569,18 @@
   right: 10px;
   top: 5px;
 }
+
+.quoteblock {
+  background: #fafafa;
+  color: #5d5d5d;
+  padding: .25rem 2rem 1.25rem;
+  blockquote {
+    margin-top: 1rem;
+  }
+  .attribution {
+    color: #8e8e8e;
+  }
+  .paragraph {
+    font-style: italic;
+  }
+}

src/main/content/_assets/css/post.scss

@@ -540,4 +540,28 @@ iframe{
 
 div.sectionbody div.ulist > ul > li p{
     font-size: 16px;
-}
+}
+
+.quoteblock{
+    display: table;
+    margin: auto;
+    blockquote{
+        &:before{
+            content: "\201c";
+            float: left;
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 2.5em;
+            font-weight: 700;
+            line-height: .6em;
+            margin-left: -.6em;
+        }
+        margin-left: 22px;
+        margin-right: 0;
+        text-align: justify;
+    }
+    .attribution{
+        text-align: right;
+        font-style: italic;
+        margin-right: 0.5ex;
+    }
+}    

src/main/content/antora_ui/src/css/doc.css

@@ -320,7 +320,6 @@
 
 .doc .quoteblock {
   background: var(--quote-background);
-  border-left: 5px solid var(--quote-border-color);
   color: var(--quote-font-color);
   padding: 0.25rem 2rem 1.25rem;
 }

src/main/content/antora_ui/src/css/javadoc-extended-stylesheet-frameless-api_spi.css

@@ -109,10 +109,13 @@ ul.nav-list li {
   float: none; }
 
 /* doesn't seem to pick up this on focus */
-.clickableNavListTab, ul.nav-list li:focus {
+ul.nav-list li:focus {
   background-color: #D6D9E4;
   color: #253441; }
 
+.clickableNavListTab {
+    color: #bb7a2a; }
+
 .clickableNavListTab:hover {
   cursor: pointer; }
 

src/main/content/antora_ui/src/css/javadoc-extended-stylesheet-frameless.css

@@ -114,9 +114,12 @@
     float: none; }
 
   /* doesn't seem to pick up this on focus */
-  .clickableNavListTab, ul.nav-list li:focus {
+  ul.nav-list li:focus {
     background-color: #D6D9E4;
     color: #253441; }
+
+  .clickableNavListTab {
+      color: #bb7a2a; }  
 
   .clickableNavListTab:hover {
     cursor: pointer; }

src/main/content/antora_ui/src/js/01-nav.js

@@ -71,6 +71,12 @@ var navigation = (function(){
       if (e.detail > 1) e.preventDefault();
     });
 
+    $('#filter_titles').on('keyup', filterNavTitles);
+
+    $('#clear_filter').on("click", function () {
+      $('#filter_titles').val('');
+      filterNavTitles();
+    })
   };
 
   $('.components .versions li a').on('click', function(e){
@@ -153,6 +159,57 @@ var navigation = (function(){
     }
   }
 
+  //Filter article titles in TOC using text input
+  function filterNavTitles(){
+    let input = $('#filter_titles').val().toLowerCase();
+    let title_match=false;
+    if(input==='' ){
+      $('#clear_filter, .no-results-container').hide();
+      $(".nav-menu > .nav-list > .nav-item").addClass('is-active');
+      $('.nav-menu > .nav-list >.nav-item .nav-item').has('.nav-item-toggle').removeClass('is-active');
+      $('.nav-item').each(function() {
+        if ($(this).css('display') === 'none') {
+            $(this).css('display', '');
+        }
+      });
+      return;
+    } 
+    $('#clear_filter').show();
+    let articles = $('.nav-link , .nav-menu .nav-text');
+    articles.parent().hide();
+    articles.each(function() {
+      let article = $(this);
+      let title = article.text().toLowerCase();
+      if (title.includes(input)) {
+        title_match=true;
+        $('.no-results-container').hide();
+        article.parent().show();
+        article.parent().has('.nav-item-toggle').removeClass('is-active');
+        showAncestors(article.parent());
+        showDescendants(article.parent());
+      }
+    });
+    if(!title_match){
+      $('.no-results-container').show();
+    }
+  }
+
+  function showAncestors(item){
+    let parent = item.parents('.nav-item');
+    parent.each(function() {
+      $(this).show();
+      $(this).has('.nav-item-toggle').addClass('is-active');
+    });
+  }
+
+  function showDescendants(item) {
+    let children = item.find('.nav-item');
+    children.each(function() {
+      $(this).show();
+      $(this).has('.nav-item-toggle').removeClass('is-active');
+    });
+  }
+
   return {
     init: init,
     activateCurrentPath: activateCurrentPath,

src/main/content/antora_ui/src/js/06-javadocs.js

@@ -368,8 +368,8 @@ function hideFooter(element) {
 
 function addNavHoverListener() {
   var javadoc_container = $("#javadoc_container").contents();
-  var rightFrame = javadoc_container.find(CLASS_FRAME);
-  var tabs = rightFrame.contents().find("ul.navList li:has(a)");
+  var navHeader = javadoc_container.find(".top-nav");
+  var tabs = navHeader.contents().find("li:has(a)");
   tabs.off("mouseover").on("mouseover", function() {
     $(this).addClass("clickableNavListTab");
   });

src/main/content/antora_ui/src/partials/nav-menu-filter.hbs

@@ -0,0 +1,9 @@
+<div class="nav-menu-filter" >
+    <input type="text" id="filter_titles" aria-label="Filter titles" placeholder="Filter titles...">
+    <button
+    id="clear_filter"
+    type="reset"
+    tabindex="0"
+    aria-label="Clear filter search"
+    >X</button>
+</div>

src/main/content/antora_ui/src/partials/nav-menu.hbs

@@ -1,6 +1,9 @@
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu" aria-label="Navigation menu for Open Liberty docs">
     <h3 class="title"><a href="{{relativize page.componentVersion.url}}">{{page.component.title}}</a></h3>
+    <div class="no-results-container">
+      <b>No titles match</b> 
+    </div>
     {{#if page.navigation}}
     {{> nav-tree navigation=page.navigation}}
     {{/if}}

src/main/content/antora_ui/src/partials/nav.hbs

@@ -2,6 +2,7 @@
   <aside class="nav" aria-label="Navigation table of contents">
     <div class="panels">
       {{> nav-explore}}
+      {{> nav-menu-filter}}
       {{> nav-menu}}
     </div>
   </aside>

src/main/content/antora_ui/src/sass/nav.scss

@@ -475,3 +475,32 @@ html.is-clipped--nav {
   white-space: nowrap;
   display: inline-block;
 }
+
+.nav-menu-filter{
+  margin: 0 19px 20px;
+  color: #5d6a8e;
+  position:relative;
+  #filter_titles{
+    background-color: #eeeff3;
+    border: 0;
+    border-radius: 3px;
+    padding: 4px 22px 4px 0.5rem;
+    width: 100%;
+  }
+  #clear_filter{
+    position: absolute;
+    right: 0;
+    background-color: transparent;
+    border: 0;
+    top: 3px;
+    display: none;
+  }
+}
+
+.no-results-container{
+  display: none;
+  font-size: 14px;
+  color: #5d6a8e;
+  margin: 0 19px 20px;
+  letter-spacing: 0.2px;
+}