Merge pull request #7 from aquatix/theme

Theme
aquatix · Jul 22, 2017 · 8ca54bf · 8ca54bf
2 parents 8bb9e11 + 0be05d0
commit 8ca54bf
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 41 deletions.
diff --git 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

diff --git a/digimarks.py b/digimarks.py
@@ -15,6 +15,64 @@
 #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 @@
 
 # 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 @@ def refreshfavicons(systemkey):
 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

diff --git 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
 {

diff --git 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 @@ <h1>{% block pageheader %}Bookmarks{% endblock %}</h1>
         </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>

diff --git 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>

diff --git 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>