+ added theme api

+ added switcher from dark and light theme
- deleted profiles directory for now
+ added theme config option
* added boilerplate to circle picker and useridenticons
This commit is contained in:
Kevin Froman 2019-10-05 18:35:40 -05:00
parent 578a238f2e
commit 7e9fe03235
No known key found for this signature in database
GPG Key ID: 0D414D0FE405B63B
18 changed files with 171 additions and 44 deletions

View File

@ -20,6 +20,8 @@
import os
from httpapi import security, friendsapi, profilesapi, configapi, insertblock, miscclientapi, onionrsitesapi, apiutils
from httpapi import directconnections
from httpapi import themeapi
def register_private_blueprints(private_api, app):
app.register_blueprint(security.client.ClientAPISecurity(private_api).client_api_security_bp)
app.register_blueprint(friendsapi.friends)
@ -32,4 +34,5 @@ def register_private_blueprints(private_api, app):
app.register_blueprint(apiutils.shutdown.shutdown_bp)
app.register_blueprint(miscclientapi.staticfiles.static_files_bp)
app.register_blueprint(directconnections.DirectConnectionManagement(private_api).direct_conn_management_bp)
app.register_blueprint(themeapi.theme_blueprint)
return app

View File

@ -24,7 +24,7 @@ from . import pluginwhitelist
# Be extremely mindful of this. These are endpoints available without a password
whitelist_endpoints = ['www', 'staticfiles.homedata', 'staticfiles.sharedContent',
'staticfiles.friends', 'staticfiles.friendsindex', 'siteapi.site', 'staticfiles.onionrhome']
'staticfiles.friends', 'staticfiles.friendsindex', 'siteapi.site', 'staticfiles.onionrhome', 'themes.getTheme']
class ClientAPISecurity:
def __init__(self, client_api):

View File

@ -0,0 +1,46 @@
"""
Onionr - Private P2P Communication
API to get current CSS theme for the client web UI
"""
"""
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
"""
from flask import Blueprint, Response
import config
from utils import readstatic
theme_blueprint = Blueprint('themes', __name__)
LIGHT_THEME_FILES = ['bulma-light.min.css', 'styles-light.css']
DARK_THEME_FILES = ['bulma-dark.min.css', 'styles-dark.css']
def _load_from_files(file_list: list)->str:
"""Loads multiple static dir files and returns them in combined string format (non-binary)"""
combo_data = ''
for f in file_list:
combo_data += readstatic.read_static('www/shared/main/themes/' + f)
return combo_data
@theme_blueprint.route('/gettheme', endpoint='getTheme')
def get_theme_file()->Response:
"""Returns the css theme data"""
css: str
theme = config.get('ui.theme', 'dark').lower()
if theme == 'dark':
css = _load_from_files(DARK_THEME_FILES)
elif theme == 'light':
css = _load_from_files(LIGHT_THEME_FILES)
return Response(css, mimetype='text/css')

View File

@ -18,6 +18,10 @@
"show_notifications": true
},
"ui": {
"theme": "dark"
},
"plugins": {
"enabled": {

View File

@ -25,6 +25,8 @@ newPostForm = document.getElementById('addMsg')
firstLoad = true
lastLoadedBoard = 'global'
loadingMessage = document.getElementById('loadingBoard')
loadedAny = false
loadingTimeout = 8000
let toggleLoadingMessage = function(){
switch (loadingMessage.style.display){
@ -107,6 +109,7 @@ function appendMessages(msg, blockHash, beforeHash){
div[4].textContent = msgDate
loadingMessage.style.display = "none"
loadedAny = true
if (firstLoad){
//feed.appendChild(clone)
feed.prepend(clone)
@ -130,10 +133,16 @@ function getBlocks(){
var ch = document.getElementById('feedIDInput').value
if (lastLoadedBoard !== ch){
toggleLoadingMessage()
loadedAny = false
while (feed.firstChild) {
feed.removeChild(feed.firstChild);
}
requested = [] // reset requested list
setTimeout(function(){
if (! loadedAny && ch == document.getElementById('feedIDInput').value){
PNotify.notice("There are no posts for " + ch + " (yet).")
}
}, loadingTimeout)
}
lastLoadedBoard = ch
@ -142,7 +151,7 @@ function getBlocks(){
}
var feedText = httpGet('/flow/getpostsbyboard/' + ch)
var feedText = httpGet('/flow/getpostsbyboard/' + ch) // TODO switch to fetch
var blockList = feedText.split(',')
for (i = 0; i < blockList.length; i++){
@ -183,7 +192,6 @@ function loadMessage(blockHash, blockList, count){
})
}
document.getElementById('refreshFeed').onclick = function(){
getBlocks()
}

View File

@ -1,3 +1,22 @@
/*
Onionr - Private P2P Communication
Handle default board picker
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
recommendedIDs = document.getElementById('recommendedBoards')
recommendedIDs.onchange = function(){

View File

@ -11,9 +11,7 @@
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/PNotifyBrightTheme.css'>
<link rel="stylesheet" href="/shared/fontawesome-free-5.10.2/css/all.min.css">
<link rel='stylesheet' href='/shared/main/bulma.min.css'>
<link rel='stylesheet' href='/shared/main/bulmaswatch.min.css'>
<link rel="stylesheet" href='/shared/main/styles-new.css'>
<link rel="stylesheet" href="/gettheme">
<link rel="stylesheet" href="theme.css">
<script defer src="/shared/base32.js"></script>
<script defer src="/shared/identicon.js"></script>

View File

@ -9,8 +9,7 @@
Onionr Chat
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel="stylesheet" href="/shared/main/bulma.min.css">
<link rel="stylesheet" href="/shared/main/styles-new.css">
<link rel="stylesheet" href="/gettheme">
<link rel="stylesheet" href="/chat/css/convos.css">
<script defer src='/shared/navbar.js'></script>
<script defer src='/shared/misc.js'></script>

View File

@ -10,9 +10,7 @@
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/PNotifyBrightTheme.css'>
<link rel='stylesheet' href='/shared/main/bulma.min.css'>
<link rel='stylesheet' href='/shared/main/bulmaswatch.min.css'>
<link rel='stylesheet' href='/shared/main/styles-new.css'>
<link rel="stylesheet" href="/gettheme">
<link rel='stylesheet' href='/friends/style.css'>
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotify.js"></script>
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>

View File

@ -10,9 +10,7 @@
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel="stylesheet" href="/shared/fontawesome-free-5.10.2/css/all.min.css">
<link rel='stylesheet' href="/shared/main/PNotifyBrightTheme.css">
<link rel="stylesheet" href="/shared/main/bulma.min.css">
<link rel='stylesheet' href='/shared/main/bulmaswatch.min.css'>
<link rel="stylesheet" href="/shared/main/styles-new.css">
<link rel="stylesheet" href="/gettheme">
<link rel="stylesheet" href="/mail/mail.css">
<script defer src='/shared/node_modules/pnotify/dist/iife/PNotify.js'></script>
<script defer src='/shared/node_modules/pnotify/dist/iife/PNotifyButtons.js'></script>

View File

@ -12,9 +12,7 @@
<link rel="stylesheet" href="/private/main.css">
<link rel="stylesheet" href="/shared/fontawesome-free-5.10.2/css/all.min.css">
<link rel='stylesheet' href='/shared/main/PNotifyBrightTheme.css'>
<link rel="stylesheet" href="/shared/main/bulma.min.css">
<link rel='stylesheet' href='/shared/main/bulmaswatch.min.css'>
<link rel="stylesheet" href="/shared/main/styles-new.css">
<link rel="stylesheet" href="/gettheme">
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotify.js"></script>
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script defer src='/shared/navbar.js'></script>

View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>
Onionr Profiles
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/style/modal.css'>
<link rel='stylesheet' href='/shared/main/style.css'>
</head>
<body>
<div class='content'>
<p></p>
</div>
<script src='/shared/navbar.js'></script>
<script src='/shared/misc.js'></script>
<script src='/profiles/profiles.js'></script>
</body>
</html>

View File

@ -0,0 +1,57 @@
/* Config on homepage */
#configContent{
display:none;
}
#configContent.show{
display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}
.hiddenOverlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
}
/* https://stackoverflow.com/a/16778646/
* Kept due to shutdown message on homepage
*/
.overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:left;
z-index: 1000;
background-color: #2c2b3f;
color: white;
}
.closeOverlay{
background-color: white;
color: black;
border: 1px solid red;
border-radius: 5px;
float: right;
font-family: sans-serif;
}
.closeOverlay:after{
content: '❌';
padding: 5px;
}
.navbarLogo{
margin-right: 5px;
color: red;
}
.aboutLogo{
max-width: 25%;
margin-bottom: 1em;
}

View File

@ -1,15 +1,33 @@
/*
Onionr - Private P2P Communication
Provides userIcon which generates SVG identicons from a Onionr user pubkey
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
function toHexString(byteArray) {
// cc-by-sa-4 https://stackoverflow.com/a/44608819 by https://stackoverflow.com/users/1883624/grantpatterson
var s = '0x';
var s = '0x'
byteArray.forEach(function(byte) {
s += ('0' + (byte & 0xFF).toString(16)).slice(-2);
});
return s;
s += ('0' + (byte & 0xFF).toString(16)).slice(-2)
})
return s
}
async function sha256(str) {
const buf = await crypto.subtle.digest("SHA-256", new TextEncoder("utf-8").encode(str));
return Array.prototype.map.call(new Uint8Array(buf), x=>(('00'+x.toString(16)).slice(-2))).join('');
const buf = await crypto.subtle.digest("SHA-256", new TextEncoder("utf-8").encode(str))
return Array.prototype.map.call(new Uint8Array(buf), x=>(('00'+x.toString(16)).slice(-2))).join('')
}
async function userIcon(pubkey, imgSize=64){