255 lines
		
	
	
		
			9.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			255 lines
		
	
	
		
			9.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
<!DOCTYPE html>
 | 
						|
<html lang="en">
 | 
						|
 | 
						|
<head>
 | 
						|
  <meta charset="UTF-8">
 | 
						|
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
						|
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 | 
						|
  <title>Tildes ReExtended Options</title>
 | 
						|
  <link href="../assets/tildes-reextended-128.png" rel="shortcut icon"
 | 
						|
    type="image/x-icon">
 | 
						|
  <link href="../scss/options.scss" rel="stylesheet">
 | 
						|
</head>
 | 
						|
 | 
						|
<body>
 | 
						|
  <div id="wrapper">
 | 
						|
    <header id="header">
 | 
						|
      <img src="../assets/tildes-reextended-128.png"
 | 
						|
        alt="Tildes ReExtended Logo">
 | 
						|
      <h1>
 | 
						|
        Tildes <span class="red-re">Re</span>Extended
 | 
						|
      </h1>
 | 
						|
      <a id="version" target="_blank" rel="noopener"></a>
 | 
						|
    </header>
 | 
						|
    <main id="main">
 | 
						|
      <div id="settings-list">
 | 
						|
        <a id="back-to-top-list">
 | 
						|
          Back To Top
 | 
						|
        </a>
 | 
						|
        <a id="hide-votes-list">
 | 
						|
          Hide Votes
 | 
						|
        </a>
 | 
						|
        <a id="jump-to-new-comment-list">
 | 
						|
          Jump To New Comment
 | 
						|
        </a>
 | 
						|
        <a id="markdown-toolbar-list">
 | 
						|
          Markdown Toolbar
 | 
						|
        </a>
 | 
						|
        <a id="user-labels-list">
 | 
						|
          User Labels
 | 
						|
        </a>
 | 
						|
        <a id="debug-list">
 | 
						|
          About & Info
 | 
						|
        </a>
 | 
						|
      </div>
 | 
						|
      <div id="settings-content">
 | 
						|
        <div id="back-to-top" class="setting">
 | 
						|
          <header>
 | 
						|
            <h2>Back To Top</h2>
 | 
						|
            <button id="back-to-top-button"></button>
 | 
						|
          </header>
 | 
						|
          <div class="content">
 | 
						|
            <p>
 | 
						|
              Adds a hovering button to the bottom-right of all pages (once
 | 
						|
              you've scrolled past a certain point) that when clicked will
 | 
						|
              scroll you back to the top.
 | 
						|
            </p>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div id="hide-votes" class="setting">
 | 
						|
          <header>
 | 
						|
            <h2>Hide Votes</h2>
 | 
						|
            <button id="hide-votes-button"></button>
 | 
						|
          </header>
 | 
						|
          <div class="content">
 | 
						|
            <p>
 | 
						|
              Select which vote counts you don't want to see, "Comments" and
 | 
						|
              "Topics" will hide the votes on other people's comments/topics
 | 
						|
              while "Own Comments/Topics" will hide the votes on your own
 | 
						|
              comments/topics.
 | 
						|
            </p>
 | 
						|
            <form>
 | 
						|
              <div>
 | 
						|
                <input type="checkbox" id="hide-votes-comments">
 | 
						|
                <label for="hide-votes-comments">Comments</label>
 | 
						|
              </div>
 | 
						|
              <div>
 | 
						|
                <input type="checkbox" id="hide-votes-topics">
 | 
						|
                <label for="hide-votes-topics">Topics</label>
 | 
						|
              </div>
 | 
						|
              <div>
 | 
						|
                <input type="checkbox" id="hide-votes-own-comments">
 | 
						|
                <label for="hide-votes-own-comments">Own Comments</label>
 | 
						|
              </div>
 | 
						|
              <div>
 | 
						|
                <input type="checkbox" id="hide-votes-own-topics">
 | 
						|
                <label for="hide-votes-own-topics">Own Topics</label>
 | 
						|
              </div>
 | 
						|
            </form>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div id="jump-to-new-comment" class="setting">
 | 
						|
          <header>
 | 
						|
            <h2>Jump To New Comment</h2>
 | 
						|
            <button id="jump-to-new-comment-button"></button>
 | 
						|
          </header>
 | 
						|
          <div class="content">
 | 
						|
            <p>
 | 
						|
              Adds a hovering button to the bottom-right of comment sections to
 | 
						|
              automatically scroll to the next new comment.
 | 
						|
            </p>
 | 
						|
            <p>Requires you to have
 | 
						|
              <a href="https://tildes.net/settings/comment_visits"
 | 
						|
                target="_blank" rel="noopener">the "Mark New Comments"
 | 
						|
                feature</a>
 | 
						|
              enabled.
 | 
						|
            </p>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div id="markdown-toolbar" class="setting">
 | 
						|
          <header>
 | 
						|
            <h2>Markdown Toolbar</h2>
 | 
						|
            <button id="markdown-toolbar-button"></button>
 | 
						|
          </header>
 | 
						|
          <div class="content">
 | 
						|
            <p>
 | 
						|
              Adds a toolbar with a selection of Markdown snippets that when
 | 
						|
              used will insert the according Markdown where your cursor is.
 | 
						|
              Particularly useful for the
 | 
						|
              <a href="https://docs.tildes.net/instructions/text-formatting#expandable-sections"
 | 
						|
                target="_blank" rel="noopener">expandable section</a>/spoilerbox
 | 
						|
              syntax. If you have text selected, the Markdown will be inserted
 | 
						|
              around your text.
 | 
						|
            </p>
 | 
						|
            <p>
 | 
						|
              For a list of all snippets,
 | 
						|
              <a href="https://gitlab.com/tildes-community/tildes-reextended/issues/12"
 | 
						|
                target="_blank" rel="noopener">see this issue</a>.
 | 
						|
            </p>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div id="user-labels" class="setting">
 | 
						|
          <header>
 | 
						|
            <h2>User Labels</h2>
 | 
						|
            <button id="user-labels-button"></button>
 | 
						|
          </header>
 | 
						|
          <div class="content">
 | 
						|
            <p>
 | 
						|
              Adds the ability to add customizable labels to users. When in a
 | 
						|
              comments section or in the topic listing a username is visible, a
 | 
						|
              <code>[+]</code> will be next to it. Clicking on that will bring
 | 
						|
              up a dialog to add a label. The values you can customize are:
 | 
						|
            </p>
 | 
						|
            <details>
 | 
						|
              <summary></summary>
 | 
						|
              <ul>
 | 
						|
                <li>
 | 
						|
                  <b>Username</b>:
 | 
						|
                  specifies who the label will be applied to.
 | 
						|
                </li>
 | 
						|
                <li>
 | 
						|
                  <b>Priority</b>:
 | 
						|
                  determines the order of labels. If multiple labels have the
 | 
						|
                  same priority they will be sorted alphabetically. In the topic
 | 
						|
                  listing only the highest priority label will be shown.
 | 
						|
                </li>
 | 
						|
                <li>
 | 
						|
                  <b>Color</b>:
 | 
						|
                  will set the background color of the label. The foreground
 | 
						|
                  color
 | 
						|
                  is calculated to be black or white depending on the brightness
 | 
						|
                  of the background color.<br>
 | 
						|
                  Valid color values are 3, 4, 6 or 8 character hex colors and a
 | 
						|
                  special "transparent" value for a transparent background.<br>
 | 
						|
                  Next to the color input there is also a dropdown menu with
 | 
						|
                  various names, these are colors taken from the Tildes theme
 | 
						|
                  you're using. Note that if you add a label with one of these
 | 
						|
                  colors they won't change when you switch themes.
 | 
						|
                </li>
 | 
						|
                <li>
 | 
						|
                  <b>Text</b>:
 | 
						|
                  the text that will go in your label. If left empty, the label
 | 
						|
                  will be a 12 by 12 pixel square instead.
 | 
						|
                </li>
 | 
						|
              </ul>
 | 
						|
            </details>
 | 
						|
            <p>
 | 
						|
              To edit or remove labels, click on the labels wherever you see
 | 
						|
              them or
 | 
						|
              use the menu below.<a class="asterisk-link"
 | 
						|
                href="https://gitlab.com/tildes-community/tildes-reextended/issues/1"
 | 
						|
                target="_blank" rel="noopener"><small>*WIP</small></a>
 | 
						|
            </p>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div id="debug" class="setting">
 | 
						|
          <header>
 | 
						|
            <h2>About & Info</h2>
 | 
						|
            <button id="debug-button"></button>
 | 
						|
          </header>
 | 
						|
          <div class="content">
 | 
						|
            <p>
 | 
						|
              When this feature is enabled, debug information will be logged to
 | 
						|
              the console.
 | 
						|
            </p>
 | 
						|
            <p>
 | 
						|
              Tildes <span class="red-re">Re</span>Extended is a recreation of
 | 
						|
              <a href="https://tildes.net/user/crius" target="_blank"
 | 
						|
                rel="noopener">Crius</a>' <a
 | 
						|
                href="https://github.com/theCrius/tildes-extended"
 | 
						|
                target="_blank" rel="noopener">Tildes Extended</a> web
 | 
						|
              extension, completely remade from scratch. Open-sourced under <a
 | 
						|
                href="https://gitlab.com/tildes-community/tildes-reextended/blob/master/License"
 | 
						|
                target="_blank" rel="noopener">the MIT license</a>
 | 
						|
              and maintained as a
 | 
						|
              <a href="https://gitlab.com/tildes-community" target="_blank"
 | 
						|
                rel="noopener">
 | 
						|
                Tildes Community project</a>.
 | 
						|
            </p>
 | 
						|
            <p>
 | 
						|
              You can report bugs or request features in <a
 | 
						|
                href="https://gitlab.com/tildes-community/tildes-reextended/issues"
 | 
						|
                target="_blank" rel="noopener">the GitLab issue tracker</a>
 | 
						|
              through the link at the bottom of this page or by
 | 
						|
              <a href="https://tildes.net/user/Bauke/new_message">private
 | 
						|
                messaging Bauke</a>
 | 
						|
              on Tildes. If you're reporting a bug through a private message,
 | 
						|
              please use the "Copy Bug Template" button below and fill out
 | 
						|
              the template in your message.
 | 
						|
            </p>
 | 
						|
            <form id="import-export">
 | 
						|
              <input class="trx-hidden" accept="application/json" type="file"
 | 
						|
                id="import-file">
 | 
						|
              <button id="import-button">Import Settings</button>
 | 
						|
              <button id="export-button">Export Settings</button>
 | 
						|
            </form>
 | 
						|
            <p>
 | 
						|
              When importing settings, note that your current settings will be
 | 
						|
              deleted and overwritten with the new ones.
 | 
						|
            </p>
 | 
						|
          </div>
 | 
						|
          <div id="debug-buttons">
 | 
						|
            <button id="copy-bug-template-button">
 | 
						|
              Copy Bug Template
 | 
						|
            </button>
 | 
						|
            <button id="log-stored-data-button">
 | 
						|
              Log Stored Data
 | 
						|
            </button>
 | 
						|
            <button id="remove-all-data-button">
 | 
						|
              Remove All Data
 | 
						|
            </button>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
    </main>
 | 
						|
    <footer id="footer">
 | 
						|
      <a id="report-a-bug" target="_blank" rel="noopener">
 | 
						|
        Report A Bug
 | 
						|
      </a>
 | 
						|
    </footer>
 | 
						|
  </div>
 | 
						|
  <script src="../ts/options.ts"></script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html>
 |