fix filtering visibility, add styles for diagram

Author: fanixus96

scaladoc/resources/dotty_res/scripts/components/FilterBar.js

@@ -2,7 +2,7 @@
  * @typedef { import("./Filter").Filter } Filter
  */
 
-class FilterBar extends Component {
+ class FilterBar extends Component {
   constructor(props) {
     super(props);
 
@@ -14,6 +14,7 @@ class FilterBar extends Component {
     this.state = {
       filter: new Filter("", {}, this.refs.elements, true),
       isVisible: false,
+      selectedPill: '',
     };
 
     this.inputComp = new Input({ onInputChange: this.onInputChange });
@@ -25,6 +26,8 @@ class FilterBar extends Component {
       onFilterToggle: this.onFilterToggle,
       onGroupSelectChange: this.onGroupSelectChange,
       onFilterVisibilityChange: this.onFilterVisibilityChange,
+      onPillClick: this.onPillClick,
+      onPillCollapse: this.onPillCollapse,
     });
 
     this.render();
@@ -58,6 +61,20 @@ class FilterBar extends Component {
     }));
   };
 
+  onPillClick = (key) => {
+    this.setState((prevState) => ({
+      filter: prevState.filter,
+      selectedPill: key
+    }))
+  }
+
+  onPillCollapse = () => {
+    this.setState((prevState) => ({
+      filter: prevState.filter,
+      selectedPill: ""
+    }))
+  }
+
   render() {
     if (this.refs.filterBar) {
       if (this.state.isVisible) {
@@ -68,7 +85,7 @@ class FilterBar extends Component {
     }
 
     this.listComp.render({ filter: this.state.filter });
-    this.filterGroupComp.render({ filter: this.state.filter });
+    this.filterGroupComp.render({ filter: this.state.filter, selectedPill: this.state.selectedPill });
   }
 }
 

scaladoc/resources/dotty_res/scripts/components/FilterGroup.js

@@ -15,12 +15,11 @@ class FilterGroup extends Component {
     this.render(this.props);
   }
 
-  onFilterClick = ({
-    currentTarget: {
-      dataset: { key, value },
-    },
-  }) => {
+  onFilterClick = (e) => {
+    const {currentTarget: {dataset: {key, value}}} = e;
     this.props.onFilterToggle(key, value);
+    e.stopPropagation();
+    e.preventDefault();
   };
 
   onSelectAllClick = ({
@@ -42,6 +41,16 @@ class FilterGroup extends Component {
     .forEach(([key, _values]) => this.props.onGroupSelectChange(key, false))
   };
 
+  showPillDropdown = (e) => {
+    this.props.onPillClick(e.currentTarget.dataset.key);
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  hidePillDropdown = () => {
+    this.props.onPillCollapse();
+  }
+
   attachFiltersClicks() {
     const refs = findRefs(
       "li.filterButtonItem",
@@ -66,9 +75,21 @@ class FilterGroup extends Component {
       this.documentableFilterRef
     );
 
+    const onPillClick = findRefs(
+      "div.pill",
+      this.filtersContainerRef
+    )
+
+    const onOutsidePillClick = findRefs(
+      "#main",
+    )
+
     attachListeners(selectAllRefs, "click", this.onSelectAllClick);
     attachListeners(deselectAllRefs, "click", this.onDeselectAllClick);
     attachListeners(deselectAllRefsWithClearButton, "click", this.onClearFilters);
+    attachListeners(onPillClick, "click", this.showPillDropdown);
+    attachListeners(onOutsidePillClick, "click", this.hidePillDropdown);
+
   }
 
   isActive(isActive) {
@@ -112,16 +133,21 @@ class FilterGroup extends Component {
     }, 0)
   }
 
-  getFilterGroup(filterKey, values) {
+  getFilterGroup(filterKey, values, selectedPill) {
     const firstSelected = this.getFirstSelected(filterKey, values);
     const numberOfSelectedFilters = this.getNumberOfSelectedFilters(filterKey, values);
     const numberToDisplay = numberOfSelectedFilters > 1
       ? `+${numberOfSelectedFilters -1}`
       : ""
 
+    const isMenuVisible = selectedPill === filterKey;
+
     return `
-      <div class="pill-container body-small" tabindex="1">
-        <div class="pill ${numberOfSelectedFilters > 0 ? "has-value" : ""}">
+      <div
+        class="pill-container body-small ${isMenuVisible ? "menu-visible" : ""}"
+        tabindex="1"
+      >
+        <div class="pill ${numberOfSelectedFilters > 0 ? "has-value" : ""}" data-key="${filterKey}">
           <span class="filter-name">${filterKey.substring(1)}</span>
           ${firstSelected} ${numberToDisplay}
           <span
@@ -155,12 +181,12 @@ class FilterGroup extends Component {
     `;
   }
 
-  render({ filter }) {
+  render({ filter, selectedPill }) {
     attachDOM(
       this.filtersContainerRef,
       Object.entries(filter.filters)
         .filter(([_key, values]) => Object.values(values).some((v) => v.visible))
-        .map(([key, values]) => this.getFilterGroup(key, values)),
+        .map(([key, values]) => this.getFilterGroup(key, values, selectedPill)),
     );
 
     this.attachFiltersClicks();

scaladoc/resources/dotty_res/styles/diagram.css

@@ -0,0 +1,3 @@
+.diagram-class {
+  position: relative;
+}

scaladoc/resources/dotty_res/styles/theme/components/diagram.css

@@ -89,11 +89,11 @@
   content: url(../../../images/thick-dark.svg);
 }
 
-.pill-container:focus ul {
+.pill-container.menu-visible ul {
   display: block;
 }
 
-.pill-container:focus .pill {
+.pill-container.menu-visible .pill {
   background-color: var(--action-primary-background-selected);
   border: 1px solid var(--action-primary-border-default);
 }

scaladoc/resources/dotty_res/styles/theme/components/pill.css

@@ -234,26 +234,30 @@
 
 .companion-badge {
   color: var(--text-primary);
-  padding: 16px;
+  padding: calc(2 * var(--base-spacing));
   background-color: var(--indigo3);
   border-radius: 4px;
 }
 
+.companion-badge span {
+  display: flex;
+}
+
 .companion-badge .micon {
-  margin-left: 0.5em;
-  margin-right: 0.5em;
+  margin-left: calc(1 * var(--base-spacing));
+  margin-right: calc(1 * var(--base-spacing));
 }
 
 .main-signature {
   background-color: var(--action-primary-background-default-solid);
-  padding: 24px;
+  padding: calc(3 * var(--base-spacing));
   border-radius: 4px;
 }
 
 #content .main-signature a {
   text-decoration: none;
 }
 
-#content>div>* {
-  margin-bottom: 24px;
+#content > div > * {
+  margin-bottom: calc(3 * var(--base-spacing));
 }

scaladoc/resources/dotty_res/styles/theme/layout/content.css

@@ -10,7 +10,7 @@
   color: var(--text-primary);
   box-sizing: border-box;
   flex-wrap: wrap;
-  z-index: 2;
+  z-index: 3;
 }
 
 #footer .left-container {

scaladoc/resources/dotty_res/styles/theme/layout/footer.css

@@ -338,9 +338,6 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
     val tabs = allTabs.filter(_.content.nonEmpty)
       if tabs.isEmpty then Nil else
         Seq(div(cls := (if singleSelection then "tabs single" else "tabs"))(
-            div(cls := "names")(tabs.map(t =>
-              button(tabAttr(t.id), cls := s"tab ${t.cls}")(t.name)
-            )),
             div(cls := "contents")(tabs.map(t =>
               div(tabAttr(t.id), cls := s"tab ${t.cls}")(t.content)
             ))
@@ -351,7 +348,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
       val graphHtml = m.graph match
         case graph if graph.edges.nonEmpty =>
           Seq(div( id := "inheritance-diagram", cls := "diagram-class showGraph")(
-            input(value := "Reset zoom", `type` := "button", cls := "btn", onclick := "zoomOut()"),
+            button(`type` := "button", cls := "label-only-button", onclick := "zoomOut()")("Reset zoom"),
             svg(id := "graph"),
             script(`type` := "text/dot", id := "dot")(
               raw(DotDiagramBuilder.build(graph, signatureRenderer))

scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala

@@ -130,10 +130,10 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       "styles/theme/components/attributes.css",
       "styles/theme/components/supertypes.css",
       "styles/theme/components/subtypes.css",
+      "styles/theme/components/diagram.css",
 
       "styles/nord-light.css",
       "styles/dotty-icons.css",
-      "styles/diagram.css",
       "styles/filter-bar.css",
       "styles/code-snippets.css",
       "styles/searchbar.css",