Simple_Bookmarks_Manager/manager.html at master · SoraKagami/Simple_Bookmarks_Manager · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title data-i18n="appName">Simple Bookmarks Manager</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="theme.css">
  <link rel="stylesheet" href="manager.css">
</head>
<body>
  <header class="toolbar">
    <button id="back" data-i18n-title="back" title="Back" disabled>←</button>
    <button id="forward" data-i18n-title="forward" title="Forward" disabled>→</button>
    <button id="new-folder" data-i18n="newFolder">New Folder</button>
    <button id="new-bookmark" data-i18n="newBookmark">New Bookmark</button>
    <input id="search" type="search" data-i18n-placeholder="searchBookmarks" placeholder="Search bookmarks">
    <label class="search-limit-toggle" data-i18n-title="searchLimitTitle" title="When enabled, search only the current folder and its subfolders. When disabled, search all bookmarks.">
      <input id="search-limit" type="checkbox">
      <span><span data-i18n="limitSearchTo">Limit Search to</span><span data-i18n="currentFolderAndSubfolders">Current Folder &amp; Subfolders</span></span>
    </label>
    <strong class="app-title" data-i18n="appName">Simple Bookmarks Manager</strong>
    <button id="app-menu-button" class="app-menu-button" type="button" data-i18n-title="openMenu" title="Open menu" aria-haspopup="menu" aria-expanded="false" data-i18n-aria-label="openSbmMenu" aria-label="Open Simple Bookmarks Manager menu">☰</button>
  </header>

  <main id="layout" class="layout">
    <nav class="left">
      <h2 data-i18n="library">Library</h2>
      <div id="roots" class="tree"></div>
    </nav>
    <div id="left-pane-resizer" class="pane-resizer pane-resizer-left" role="separator" aria-orientation="vertical" tabindex="0" data-i18n-title="resizeLibraryPane" title="Resize Library pane"></div>

    <section class="content">
      <div id="crumbs" class="crumbs">
        <label class="visual-sort-label" for="sort" data-i18n="visualSort">Visual sort:</label>
        <select id="sort" data-i18n-title="chooseSortModeTitle" title="Choose the middle-pane sort mode. Default uses Chromium’s folder order.">
          <option value="index" data-i18n="sortDefault">Default</option>
          <option value="title" data-i18n="sortName">Name</option>
          <option value="url" data-i18n="sortUrl">URL</option>
          <option value="dateAdded" data-i18n="sortDateAdded">Date added</option>
          <option value="id" data-i18n="sortId">ID</option>
        </select>
      </div>
      <div id="table-scroll" class="table-scroll">
        <div class="table-content">
          <div class="columns" data-i18n-aria-label="bookmarkListColumns" aria-label="Bookmark list columns">
            <button type="button" data-sort-key="title" data-i18n="sortName">Name</button>
            <button type="button" data-sort-key="url" data-i18n="sortUrl">URL</button>
            <button type="button" data-sort-key="dateAdded" data-i18n="sortDateAddedHeader">Date Added</button>
            <button type="button" data-sort-key="id" data-i18n="sortId">ID</button>
            <button type="button" data-sort-key="index" data-i18n="sortOrder">Order</button>
          </div>
          <div id="list" class="list" tabindex="0" data-i18n-aria-label="bookmarksAria" aria-label="Bookmarks"></div>
        </div>
      </div>
    </section>

    <div id="right-pane-resizer" class="pane-resizer pane-resizer-right" role="separator" aria-orientation="vertical" tabindex="0" data-i18n-title="resizeDetailsPane" title="Resize Details pane"></div>
    <aside id="details-pane" class="details">
      <div class="details-header">
        <h2 data-i18n="details">Details</h2>
        <button id="open-bookmark-details" class="open-bookmark-details" type="button" data-i18n="openBookmark" hidden disabled>Open Bookmark</button>
      </div>
      <form id="details-form">
        <label id="title-label"><span class="field-caption" data-i18n="sortName">Name</span><input id="title" autocomplete="off"></label>
        <label id="url-label"><span class="field-caption" data-i18n="url">URL</span><input id="url" autocomplete="off" aria-describedby="url-warning"></label>
        <p id="url-warning" class="field-warning" role="status" aria-live="polite" hidden></p>
        <label id="parent-label"><span class="field-caption" data-i18n="parentFolder">Parent folder</span><select id="parent"></select></label>
        <div class="row details-actions">
          <button id="save" type="submit" data-i18n="save">Save</button>
          <button id="discard" type="button" data-i18n="discardChanges">Discard Changes</button>
          <button id="delete" type="button" data-i18n="delete">Delete</button>
        </div>
        <section id="advanced-details" class="advanced-details" data-i18n-aria-label="advancedBookmarkDetails" aria-label="Advanced bookmark details">
          <h3 data-i18n="advancedDetails">Advanced Details</h3>
          <label id="advanced-id-label"><span class="field-caption" data-i18n="sortId">ID</span><input id="advanced-id" autocomplete="off" readonly></label>
          <label id="advanced-guid-label"><span class="field-caption" data-i18n="guidUuid">GUID / UUID</span><input id="advanced-guid" autocomplete="off" readonly></label>
          <label id="advanced-date-added-label"><span class="field-caption" data-i18n="dateAdded">Date Added</span><input id="advanced-date-added" autocomplete="off" readonly></label>
          <label id="advanced-date-last-used-label"><span class="field-caption" data-i18n="dateLastUsed">Date Last Used</span><input id="advanced-date-last-used" autocomplete="off" readonly></label>
          <label id="advanced-index-label"><span class="field-caption" data-i18n="sortOrder">Sort order</span><input id="advanced-index" type="number" min="0" step="1" autocomplete="off" readonly></label>
        </section>
      </form>
      <section id="details-multiselect" class="details-multiselect" hidden>
        <h3 data-i18n="detailsMultiselect">Details Multiselect</h3>
        <p><strong data-i18n="totalSelected">Total selected:</strong> <span id="multi-total">0</span></p>
        <p><strong data-i18n="folders">Folders:</strong> <span id="multi-folders">0</span></p>
        <p><strong data-i18n="bookmarks">Bookmarks:</strong> <span id="multi-bookmarks">0</span></p>
        <p><strong data-i18n="separators">Separators:</strong> <span id="multi-separators">0</span></p>
      </section>
      <p id="empty-details" data-i18n="emptyDetails">Select one item, or select a folder to show its contents.</p>
    </aside>
  </main>

  <div id="options-modal" class="options-modal" hidden role="dialog" aria-modal="true" aria-labelledby="options-modal-title">
    <section class="options-dialog">
      <header class="options-dialog-header">
        <h2 id="options-modal-title" data-i18n="optionsTitle">Simple Bookmarks Manager Options</h2>
        <button id="options-close" class="options-close" type="button" data-i18n-aria-label="closeOptions" aria-label="Close options">×</button>
      </header>
      <div id="options-frame-host" class="options-frame-host"></div>
    </section>
  </div>

  <div id="info-modal" class="info-modal" hidden role="dialog" aria-modal="true" aria-labelledby="info-modal-title">
    <section class="info-dialog">
      <header class="info-dialog-header">
        <h2 id="info-modal-title"></h2>
        <button id="info-close" class="info-close" type="button" data-i18n-aria-label="closeDialog" aria-label="Close dialog">×</button>
      </header>
      <div id="info-content-host" class="info-content-host"></div>
    </section>
  </div>

  <script type="module" src="manager.js"></script>
</body>
</html>