Merge pull request #7 from aquatix/theme

Theme
2025-12-06 20:55:10 +01:00 · 2017-07-22 21:55:03 +02:00
parent 8bb9e11088 0be05d07e9
commit 8ca54bf364
6 changed files with 122 additions and 41 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 - Show 404 page if bookmark is not found when editing
 - Cache buster to force loading of the latest styling
+- Theming support, default is 'green'
+- Themes need an extra `theme` field in the User table

 ### Changed
 - Make running in a virtualenv optional
--- a/digimarks.py
+++ b/digimarks.py
@@ -15,6 +15,64 @@ from flask_peewee.db import Database
 #from flask_peewee.utils import get_object_or_404
 from peewee import * # noqa

+DEFAULT_THEME = 'green'
+themes = {
+    'green': {
+        'BODY': 'grey lighten-4',
+        'TEXT': 'black-text',
+        'TEXTHEX': '#000',
+        'NAV': 'green darken-3',
+        'PAGEHEADER': 'grey-text lighten-5',
+        'MESSAGE_BACKGROUND': 'orange lighten-2',
+        'MESSAGE_TEXT': 'white-text',
+        'ERRORMESSAGE_BACKGROUND': 'red darken-1',
+        'ERRORMESSAGE_TEXT': 'white-text',
+        'CARD_BACKGROUND': 'green darken-3',
+        'CARD_TEXT': 'white-text',
+        'FAB': 'red',
+
+        'STAR': 'yellow-text',
+        'PROBLEM': 'red-text',
+        'COMMENT': '',
+    },
+    'freshgreen': {
+        'BODY': 'grey lighten-5',
+        'TEXT': 'black-text',
+        'TEXTHEX': '#000',
+        'NAV': 'green darken-1',
+        'PAGEHEADER': 'grey-text lighten-5',
+        'MESSAGE_BACKGROUND': 'orange lighten-2',
+        'MESSAGE_TEXT': 'white-text',
+        'ERRORMESSAGE_BACKGROUND': 'red darken-1',
+        'ERRORMESSAGE_TEXT': 'white-text',
+        'CARD_BACKGROUND': 'green darken-1',
+        'CARD_TEXT': 'white-text',
+        'FAB': 'red',
+
+        'STAR': 'yellow-text',
+        'PROBLEM': 'red-text',
+        'COMMENT': '',
+    },
+    'dark': {
+        'BODY': 'grey darken-4',
+        'TEXT': 'grey-text lighten-1',
+        'TEXTHEX': '#bdbdbd',
+        'NAV': 'grey darken-3',
+        'PAGEHEADER': 'grey-text lighten-1',
+        'MESSAGE_BACKGROUND': 'orange lighten-2',
+        'MESSAGE_TEXT': 'white-text',
+        'ERRORMESSAGE_BACKGROUND': 'red darken-1',
+        'ERRORMESSAGE_TEXT': 'white-text',
+        'CARD_BACKGROUND': 'grey darken-3',
+        'CARD_TEXT': 'grey-text lighten-1',
+        'FAB': 'red',
+
+        'STAR': 'yellow-text',
+        'PROBLEM': 'red-text',
+        'COMMENT': '',
+    }
+}
+
 try:
    import settings
 except ImportError:
@@ -45,6 +103,7 @@ except AttributeError:

 # Cache the tags
 all_tags = {}
+settings = {}


 def ifilterfalse(predicate, iterable):
@@ -103,6 +162,7 @@ class User(db.Model):
    """ User account """
    username = CharField()
    key = CharField()
+    theme = CharField(default=DEFAULT_THEME)
    created_date = DateTimeField(default=datetime.datetime.now)

    def generate_key(self):
@@ -292,6 +352,14 @@ def get_cached_tags(userkey):
        return []


+def get_theme(userkey):
+    try:
+        usertheme = settings[userkey]['theme']
+        return themes[usertheme]
+    except KeyError:
+        return themes[DEFAULT_THEME]  # default
+
+
 def make_external(url):
    return urljoin(request.url_root, url)

@@ -304,7 +372,8 @@ def page_not_found(e):
@app.route('/')
 def index():
    """ Homepage, point visitors to project page """
-    return render_template('index.html')
+    theme = themes[DEFAULT_THEME]
+    return render_template('index.html', theme=theme)


@app.route('/<userkey>', methods=['GET', 'POST'])
@@ -353,7 +422,8 @@ def bookmarks(userkey, filtermethod = None, sortmethod = None):
    else:
        bookmarks = Bookmark.select().where(Bookmark.userkey == userkey, Bookmark.status == Bookmark.VISIBLE).order_by(Bookmark.created_date.desc())

-    return render_template('bookmarks.html', bookmarks=bookmarks, userkey=userkey, tags=tags, filter_text=filter_text, message=message)
+    theme = get_theme(userkey)
+    return render_template('bookmarks.html', bookmarks=bookmarks, userkey=userkey, tags=tags, filter_text=filter_text, message=message, theme=theme)



@@ -385,7 +455,8 @@ def editbookmark(userkey, urlhash):
    if not bookmark.note:
        # Workaround for when an existing bookmark has a null note
        bookmark.note = ''
-    return render_template('edit.html', action='Edit bookmark', userkey=userkey, bookmark=bookmark, message=message, formaction='edit', tags=tags)
+    theme = get_theme(userkey)
+    return render_template('edit.html', action='Edit bookmark', userkey=userkey, bookmark=bookmark, message=message, formaction='edit', tags=tags, theme=theme)


@app.route('/<userkey>/add')
@@ -399,7 +470,8 @@ def addbookmark(userkey):
    bookmark = Bookmark(title='', url=url, tags='')
    message = request.args.get('message')
    tags = get_cached_tags(userkey)
-    return render_template('edit.html', action='Add bookmark', userkey=userkey, bookmark=bookmark, tags=tags, message=message)
+    theme = get_theme(userkey)
+    return render_template('edit.html', action='Add bookmark', userkey=userkey, bookmark=bookmark, tags=tags, message=message, theme=theme)


 def updatebookmark(userkey, request, urlhash = None):
@@ -527,9 +599,10 @@ def tags(userkey):
    totaldeleted = Bookmark.select().where(Bookmark.userkey == userkey, Bookmark.status == Bookmark.DELETED).count()
    totalnotes = Bookmark.select().where(Bookmark.userkey == userkey, Bookmark.note != '').count()
    totalhttperrorstatus = Bookmark.select().where(Bookmark.userkey == userkey, Bookmark.http_status != 200).count()
+    theme = get_theme(userkey)
    return render_template('tags.html', tags=alltags, totaltags=totaltags, totalpublic=totalpublic, totalbookmarks=totalbookmarks,
                            totaldeleted=totaldeleted, totalstarred=totalstarred, totalhttperrorstatus=totalhttperrorstatus,
-                            totalnotes=totalnotes, userkey=userkey)
+                            totalnotes=totalnotes, userkey=userkey, theme=theme)


@app.route('/<userkey>/tag/<tag>')
@@ -545,7 +618,9 @@ def tag(userkey, tag):
    except PublicTag.DoesNotExist:
        publictag = None

-    return render_template('bookmarks.html', bookmarks=bookmarks, userkey=userkey, tags=tags, tag=tag, publictag=publictag, action=pageheader, message=message)
+    theme = get_theme(userkey)
+    return render_template('bookmarks.html', bookmarks=bookmarks, userkey=userkey, tags=tags, tag=tag, publictag=publictag, action=pageheader,
+                            message=message, theme=theme)


@app.route('/pub/<tagkey>')
@@ -555,7 +630,8 @@ def publictag(tagkey):
    try:
        this_tag = PublicTag.get(PublicTag.tagkey == tagkey)
        bookmarks = Bookmark.select().where(Bookmark.userkey == this_tag.userkey, Bookmark.tags.contains(this_tag.tag), Bookmark.status == Bookmark.VISIBLE).order_by(Bookmark.created_date.desc())
-        return render_template('publicbookmarks.html', bookmarks=bookmarks, tag=tag, action=this_tag.tag, tagkey=tagkey)
+        theme = themes[DEFAULT_THEME]
+        return render_template('publicbookmarks.html', bookmarks=bookmarks, tag=tag, action=this_tag.tag, tagkey=tagkey, theme=theme)
    except PublicTag.DoesNotExist:
        abort(404)

@@ -670,6 +746,7 @@ users = User.select()
 print('Current user keys:')
 for user in users:
    all_tags[user.key] = get_tags_for_user(user.key)
+    settings[user.key] = {'theme': user.theme}
    print(user.key)

 # Run when called standalone
--- a/static/css/digimarks.css
+++ b/static/css/digimarks.css
@@ -18,16 +18,6 @@ nav .button-collapse i

 /** Form input fields **/

-/* label color */
-.input-field label
-{
-    color: #000;
-}
-/* label focus color */
-.input-field input[type=text]:focus + label
-{
-    color: #000;
-}
 /* label underline focus color */
 .input-field input[type=text]:focus
 {
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,12 +17,24 @@

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
-        <link href="{{ url_for('static', filename='css/digimarks.css') }}?20170204" type="text/css" rel="stylesheet" media="screen,projection"/>
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+        <style>
+            /* label color */
+            .input-field label
+            {
+                color: {{ theme.TEXTHEX }};
+            }
+            /* label focus color */
+            .input-field input[type=text]:focus + label
+            {
+                color: {{ theme.TEXTHEX }};
+            }
+        </style>
+        <link href="{{ url_for('static', filename='css/digimarks.css') }}?20170722" type="text/css" rel="stylesheet" media="screen,projection"/>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
-    <body class="grey lighten-4">
-        <nav class="green darken-3" role="navigation">
+    <body class="{{ theme.BODY }} {{ theme.TEXT }}">
+        <nav class="{{ theme.NAV }}" role="navigation">
            <div class="nav-wrapper container"><a id="logo-container" href="{% if userkey %}{{ url_for('bookmarks', userkey=userkey) }}{% else %}{{ url_for('index') }}{% endif %}" class="brand-logo">digimarks</a>
                <ul class="right hide-on-med-and-down">
                    {% if userkey %}
@@ -43,7 +55,7 @@
        </nav>
        <div class="section no-pad-bot" id="index-banner">
            <div class="container">
-                <div class="header grey-text lighten-5">
+                <div class="header {{ theme.PAGEHEADER }}">
                    <h1>{% block pageheader %}Bookmarks{% endblock %}</h1>
                </div>
            </div>
@@ -56,7 +68,7 @@
        </div>

        <!-- Scripts -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
        <script src="{{ url_for('static', filename='js/init.js') }}"></script>

    </body>
--- a/templates/bookmarks.html
+++ b/templates/bookmarks.html
@@ -23,8 +23,8 @@
 {% if message %}
 <div class="row">
    <div class="col s12">
-        <div class="card-panel orange lighten-2">
-            <span class="white-text">
+        <div class="card-panel {{ theme.MESSAGE_BACKGROUND }}">
+            <span class="{{ theme.MESSAGE_TEXT }}">
                {{ message|safe }}
            </span>
        </div>
@@ -52,13 +52,13 @@
              <div class="collapsible-header"><i class="material-icons">label</i>Filter on star/problem/comment/tag</div>
              <div class="collapsible-body" style="padding: 10px;">
                <div class="chip">
-                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='starred') }}"><i class="tiny material-icons yellow-text">star</i></a>
+                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='starred') }}"><i class="tiny material-icons {{ theme.STAR }}">star</i></a>
                </div>
                <div class="chip">
-                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='broken') }}"><i class="tiny material-icons red-text">report_problem</i></a>
+                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='broken') }}"><i class="tiny material-icons {{ theme.PROBLEM }}">report_problem</i></a>
                </div>
                <div class="chip">
-                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='note') }}"><i class="tiny material-icons">comment</i></a>
+                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='note') }}"><i class="tiny material-icons {{ theme.COMMENT }}">comment</i></a>
                </div>
                {% for tag in tags %}
                <div class="chip">
@@ -83,23 +83,23 @@
            <p>{{ bookmark.created_date.strftime("%m/%d/%Y %H:%M") }}</p>
        </div>
        #}
-        <div class="card horizontal tiny green darken-3">
+        <div class="card horizontal tiny {{ theme.CARD_BACKGROUND }}">
            <div class="card-image">
                {% if bookmark.favicon %}
                    <div><img src="{{ url_for('static', filename='favicons/' + bookmark.favicon) }}" class="favicon" /></div>
                {% endif %}
                {% if bookmark.http_status != 200 and bookmark.http_status != 304 %}
-                    <div><i class="small material-icons red-text" title="HTTP status {{ bookmark.http_status }}">report_problem</i></div>
+                    <div><i class="small material-icons {{ theme.PROBLEM }}" title="HTTP status {{ bookmark.http_status }}">report_problem</i></div>
                {% endif %}
                {% if bookmark.starred == True %}
-                    <div><i class="small material-icons yellow-text">star</i></div>
+                    <div><i class="small material-icons {{ theme.STAR }}">star</i></div>
                {% endif %}
                {% if bookmark.note %}
-                    <div><i class="small material-icons white-text" title="{{ bookmark.note|truncate(100) }}">comment</i></div>
+                    <div><i class="small material-icons {{ theme.CARD_TEXT }}" title="{{ bookmark.note|truncate(100) }}">comment</i></div>
                {% endif %}
            </div>
            <div class="card-stacked">
-                <div class="card-content white-text">
+                <div class="card-content {{ theme.CARD_TEXT }}">
                    <span class="digimark-card-header activator">
                        <span class="digimark-card-header-tags">
                        {% for tag in bookmark.tags_list %}
@@ -121,9 +121,9 @@
                    </div>
                </div>
            </div>
-            <div class="card-reveal green darken-3">
-                <span class="card-title white-text">Added @ {{ bookmark.created_date.strftime('%Y-%m-%d %H:%M') }}<i class="material-icons right">close</i></span>
-                <div class="white-text" style="padding-top: 10px;">
+            <div class="card-reveal {{ theme.CARD_BACKGROUND }}">
+                <span class="card-title {{ theme.CARD_TEXT }}">Added @ {{ bookmark.created_date.strftime('%Y-%m-%d %H:%M') }}<i class="material-icons right">close</i></span>
+                <div class="{{ theme.CARD_TEXT }}" style="padding-top: 10px;">
                <a href="{{ url_for('editbookmark', userkey=userkey, urlhash=bookmark.url_hash) }}" style="padding: 3px"><i class="tiny material-icons">mode_edit</i> EDIT</a>
                <a href="{{ url_for('deletingbookmark', userkey=userkey, urlhash=bookmark.url_hash) }}" style="padding: 3px" class="red-text"><i class="tiny material-icons">delete</i> DELETE</a>
                </div>
@@ -141,7 +141,7 @@
 </div>

 <div class="fixed-action-btn" style="bottom: 20px; right: 20px;">
-    <a class="btn-floating btn-large red" href="{{ url_for('addbookmark', userkey=userkey) }}">
+    <a class="btn-floating btn-large {{ theme.FAB }}" href="{{ url_for('addbookmark', userkey=userkey) }}">
      <i class="large material-icons">add</i>
    </a>
 </div>
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -6,8 +6,8 @@
 {% if bookmark.http_status != 200 and bookmark.http_status != 304 %}
 <div class="row">
    <div class="col s12">
-        <div class="card-panel red darken-1">
-            <span class="white-text">
+        <div class="card-panel {{ theme.ERRORMESSAGE_BACKGROUND }}">
+            <span class="{{ theme.ERRORMESSAGE_TEXT }}">
                {% if bookmark.http_status == 404 %}
                <i class="material-icons">report_problem</i>&nbsp;&nbsp;URL not found (404), broken/outdated link?
                {% elif bookmark.http_status == 302 %}
@@ -26,8 +26,8 @@
 {% if message %}
 <div class="row">
    <div class="col s12">
-        <div class="card-panel orange lighten-2">
-            <span class="white-text">
+        <div class="card-panel {{ theme.MESSAGE_BACKGROUND }}">
+            <span class="{{ theme.MESSAGE_TEXT }}">
                {{ message }}
            </span>
        </div>