add: UI design for Related Notes filter & sorter #15

SeptemberHX · Oct 24, 2022 · 99a5497 · 99a5497
1 parent 5888a31
commit 99a5497
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/relatedNotes/panelHtml.ts b/src/relatedNotes/panelHtml.ts
@@ -6,6 +6,26 @@ var md = require('markdown-it')()
 export function panelHtml(relatedEls: NoteElement[]) {
     let result = [];
     result.push(`<div class="related-notes-div">`);
+    result.push(`<div class="related-notes-option">`);
+    result.push(`<div class="related-notes-option-filter">
+                    <input class="form-check-input" type="checkbox" id="left-check" name="Left" value="something" checked>
+                    <label class="form-check-label"><i class="fas fa-arrow-left"></i></label>
+                    
+                    <input class="form-check-input" type="checkbox" id="right-check" name="Right" value="something" checked>
+                    <label class="form-check-label"><i class="fas fa-arrow-right"></i></label>
+                    
+                    <input class="form-check-input" type="checkbox" id="bidirection-check" name="Left & Right" value="something" checked>
+                    <label class="form-check-label"><i class="fas fa-arrows-alt-h"></i></label>
+                 </div>
+                 <div class="related-notes-option-sorter">
+                    <select id="related-notes-sorter-selector" class="form-select form-select-sm" aria-label="Sorter Selector">;
+                        <option value="Score">Score</option>
+                        <option value="Alphabet">Alphabet</option>
+                        <option value="LineNumber">LineNumber</option>
+                    </select>
+                 </div>
+    `);
+    result.push(`</div>`);
     result.push('<ul class="list-group">');
 
     for (const related of relatedEls) {

diff --git a/src/scripts/relatedNotes/relatedNotes.css b/src/scripts/relatedNotes/relatedNotes.css
@@ -49,6 +49,23 @@ span.related-element-parent.badge.text-bg-light {
     opacity: 0.5;
 }
 
+.related-notes-div .related-notes-option-filter {
+    display: inline;
+    margin: auto;
+    font-size: 1.1em;
+}
+
+.related-notes-div .related-notes-option {
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    padding: 0.25em 1em;
+}
+
+.related-notes-div .related-notes-option-filter label.form-check-label {
+    margin-right: 0.5em;
+}
+
 .related-element-body {
     margin-left: 1em;
 }