Mastodon
/
share-to-mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update share and settings UI

This commit is contained in:
Corbin Davenport 2023-02-13 12:28:09 -05:00
parent e806404e43
commit d00c015818
4 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/mastodon-offline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

27
js/share.js
View File

@ -1,18 +1,4 @@
/*
var shareLink = ''
var shareText = ''
if (info.linkUrl) {
shareLink = info.linkUrl
shareText = 'Type something here'
} else if (info.selectionText) {
shareLink = info.pageUrl
shareText = '"' + info.selectionText + '"'
} else {
shareLink = info.pageUrl
shareText = 'Type something here'
}
*/
// Function to initialize UI and redirects
async function init() {
// Generate links to options page
document.querySelectorAll('.extension-settings-link').forEach(function(el) {
@ -43,14 +29,19 @@ async function init() {
// Create link list element
var serverUrl = data.serverList[server]
var linkEl = document.createElement('a')
linkEl.classList.add('list-group-item', 'list-group-item', 'list-group-item-action', 'display-6')
linkEl.classList.add('list-group-item', 'list-group-item', 'list-group-item-action', 'fw-bold')
linkEl.innerText = serverUrl
linkEl.href = 'https://' + serverUrl + '/share?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
linkEl.rel = 'preconnect'
// Add server icon to list
var serverImg = document.createElement('img')
serverImg.src = 'https://' + serverUrl + '/favicon.ico'
serverImg.alt = serverUrl + ' icon'
serverImg.setAttribute('src', 'https://' + serverUrl + '/favicon.ico')
serverImg.setAttribute('alt', serverUrl + ' icon')
serverImg.ariaHidden = 'true'
serverImg.onerror = function() {
// Show a monochrome Mastodon icon if the server isn't responding
this.src = chrome.runtime.getURL('img/mastodon-offline.png')
}
linkEl.prepend(serverImg)
// Inject element
serverListEl.appendChild(linkEl)

21
settings.html
View File

@ -11,23 +11,30 @@
body {
max-width: 450px;
}
select {
overflow: auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- Server select -->
<div class="mb-1">
<label for="mastodon-server-list" class="form-label">Mastodon servers</label>
<select id="mastodon-server-list" class="form-select" size="5" aria-label="Mastodon server list"></select>
</div>
<div class="input-group input-group-sm mb-1">
<!-- Add a server -->
<label for="mastodon-server-text" class="form-label">Add a server</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" id="mastodon-server-text" placeholder="yourserver.social" aria-label="Server domain" aria-describedby="server-add-btn">
<button class="btn btn-outline-secondary" type="button" id="server-add-btn">Add</button>
</div>
<small class="text-muted">Server must be running <a href="https://github.com/mastodon/mastodon/releases/tag/v1.6.0" target="_blank">Mastodon 1.6</a> or newer.</small>
<!-- Server select -->
<div class="mt-3 mb-1">
<label for="mastodon-server-list" class="form-label">Saved servers</label>
<select id="mastodon-server-list" class="form-select" size="5" aria-label="Saved servers list"></select>
</div>
<button class="btn btn-sm btn-outline-secondary w-100 mb-3" type="button" id="server-remove-btn">Remove selected</button>
<!-- Link to keyboard shortcut -->
<!-- Other options -->
<div class="mb-3">
<label class="form-label">Other settings</label>
<button type="button" class="btn btn-sm btn-primary w-100" id="mastodon-keyboard-shortcut">Change keyboard shortcut</button>
</div>
<hr>

7
share.html
View File

@ -10,10 +10,9 @@
<link href="css/dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
<style>
.list-group-item img {
height: 1.3em;
width: 1.3em;
margin: 0.2em 0;
margin-right: 0.5em;
height: 1.6em;
width: 1.6em;
margin-right: 1em;
}
</style>
</head>