Initial css variables release

webapp/alembic/versions/058f970b85db_added_css_variables_column.py

@@ -0,0 +1,28 @@
+"""Added CSS Variables Column
+
+Revision ID: 058f970b85db
+Revises: 95ab6a63135d
+Create Date: 2017-06-04 22:51:34.297399
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = '058f970b85db'
+down_revision = '95ab6a63135d'
+branch_labels = None
+depends_on = None
+
+from alembic import op
+import sqlalchemy as sa
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('user_css', sa.Column('css_variables', sa.Text(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('user_css', 'css_variables')
+    # ### end Alembic commands ###

webapp/titanembeds/blueprints/embed/embed.py

@@ -4,6 +4,7 @@ from titanembeds.oauth import generate_guild_icon_url, generate_avatar_url
 from titanembeds.database import db, Guilds, UserCSS
 from config import config
 import random
+import json
 
 embed = Blueprint("embed", __name__)
 
@@ -26,6 +27,28 @@ def get_custom_css():
         css = db.session.query(UserCSS).filter(UserCSS.id == css).first()
     return css
 
+def parse_css_variable(css):
+    CSS_VARIABLES_TEMPLATE = """:root {
+      /*--<var>: <value>*/
+      --modal: %(modal)s;
+      --noroleusers: %(noroleusers)s;
+      --main: %(main)s;
+      --placeholder: %(placeholder)s;
+      --sidebardivider: %(sidebardivider)s;
+      --leftsidebar: %(leftsidebar)s;
+      --rightsidebar: %(rightsidebar)s;
+      --header: %(header)s;
+      --chatmessage: %(chatmessage)s;
+      --discrim: %(discrim)s;
+      --chatbox: %(chatbox)s;
+    }"""
+    if not css:
+        return None
+    else:
+        variables = css.css_variables
+    variables = json.loads(variables)
+    return CSS_VARIABLES_TEMPLATE % variables
+
 @embed.route("/<string:guild_id>")
 def guild_embed(guild_id):
     if check_guild_existance(guild_id):
@@ -37,13 +60,15 @@ def guild_embed(guild_id):
             "icon": guild.icon,
             "discordio": guild.discordio,
         }
+        customcss = get_custom_css()
         return render_template("embed.html.j2",
             login_greeting=get_logingreeting(),
             guild_id=guild_id, guild=guild_dict,
             generate_guild_icon=generate_guild_icon_url,
             unauth_enabled=guild_query_unauth_users_bool(guild_id),
             client_id=config['client-id'],
-            css=get_custom_css()
+            css=customcss,
+            cssvariables=parse_css_variable(customcss)
         )
     abort(404)
 

webapp/titanembeds/blueprints/user/user.py

@@ -5,6 +5,7 @@ from titanembeds.database import db, Guilds, UnauthenticatedUsers, Unauthenticat
 from titanembeds.oauth import authorize_url, token_url, make_authenticated_session, get_current_authenticated_user, get_user_managed_servers, check_user_can_administrate_guild, check_user_permission, generate_avatar_url, generate_guild_icon_url, generate_bot_invite_url
 import time
 import datetime
+import json
 
 user = Blueprint("user", __name__)
 
@@ -95,7 +96,7 @@ def new_custom_css_post():
     else:
         name = name.strip()
         css = css.strip()
-    css = UserCSS(name, user_id, css)
+    css = UserCSS(name, user_id, None, css)
     db.session.add(css)
     db.session.commit()
     return jsonify({"id": css.id})
@@ -111,7 +112,8 @@ def edit_custom_css_get(css_id):
         abort(404)
     if css.user_id != session['user_id']:
         abort(403)
-    return render_template("usercss.html.j2", new=False, css=css)
+    variables = json.loads(css.css_variables)
+    return render_template("usercss.html.j2", new=False, css=css, variables=variables)
 
 @user.route("/custom_css/edit/<css_id>", methods=["POST"])
 @discord_users_only()
@@ -126,6 +128,7 @@ def edit_custom_css_post(css_id):
         abort(403)
     name = request.form.get("name", None)
     css = request.form.get("css", "")
+    variables = request.form.get("variables", None)
     if not name:
         abort(400)
     else:
@@ -133,6 +136,7 @@ def edit_custom_css_post(css_id):
         css = css.strip()
     dbcss.name = name
     dbcss.css = css
+    dbcss.css_variables = variables
     db.session.commit()
     return jsonify({"id": dbcss.id})
 

webapp/titanembeds/database/user_css.py

@@ -5,9 +5,11 @@ class UserCSS(db.Model):
     id = db.Column(db.Integer, primary_key=True)                    # Auto increment id
     name = db.Column(db.String(255), nullable=False)                # CSS Name
     user_id = db.Column(db.String(255), nullable=False)             # Discord client ID of the owner of the css (can edit)
+    css_variables = db.Column(db.Text())                            # Customizeable CSS Variables
     css = db.Column(db.Text())                                      # CSS contents
 
-    def __init__(self, name, user_id, css=None):
+    def __init__(self, name, user_id, css_variables=None, css=None):
         self.name = name
         self.user_id = user_id
+        self.css_variables = css_variables
         self.css = css

webapp/titanembeds/static/js/usercss.js

@@ -4,11 +4,12 @@
     
     function postForm() {
         var name = $('#css_name').val();
+        var variables = JSON.stringify(formatCSSVars());
         var css = editor.getValue();
         var funct = $.ajax({
             dataType: "json",
             method: "POST",
-            data: {"name": name, "css": css}
+            data: {"name": name, "variables": variables, "css": css}
         });
         return funct.promise();
     }
@@ -23,6 +24,22 @@
         }
     });
     
+    function formatCSSVars() {
+        return {
+            "modal": $("#css_var_modal").val(),
+            "noroleusers": $("#css_var_noroleusers").val(),
+            "main": $("#css_var_main").val(),
+            "placeholder": $("#css_var_placeholder").val(),
+            "sidebardivider": $("#css_var_sidebardivider").val(),
+            "leftsidebar": $("#css_var_leftsidebar").val(),
+            "rightsidebar": $("#css_var_rightsidebar").val(),
+            "header": $("#css_var_header").val(),
+            "chatmessage": $("#css_var_chatmessage").val(),
+            "discrim": $("#css_var_discrim").val(),
+            "chatbox": $("#css_var_chatbox").val(),
+        };
+    }
+    
     function submitForm() {
         var formPost = postForm();
         formPost.done(function (data) {

webapp/titanembeds/templates/embed.html.j2

@@ -17,7 +17,7 @@
     {% include 'google_analytics.html.j2' %}
     
     {% if css is not none %}
-    <style id="user-defined-css">{{ css.css }}</style>
+    <style id="user-defined-css">{% if cssvariables is not none %}{{ cssvariables }}{% endif %} {{ css.css }}</style>
     {% endif %}
   </head>
   <body>

webapp/titanembeds/templates/usercss.html.j2

@@ -27,6 +27,56 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
         <input placeholder="Some Lit CSS" id="css_name" type="text" {% if not new %}value="{{ css.name }}"{% endif %}>
         <label for="css_name">Name</label>
     </div>
+    <div class="col s12">
+        <p class="flow-text">Propose Predefined CSS variables here</p>
+        <div class="row">
+            <div class="col m6 s12">
+                <span>Modal Background Color (<code>--modal</code>):<span>
+                <input id="css_var_modal" class="jscolor {hash:true}" value="{% if new or variables is none %}#546e7a{% else %}{{ variables.modal }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Uncategorized Discord Users (<code>--noroleusers</code>):<span>
+                <input id="css_var_noroleusers" class="jscolor {hash:true}" value="{% if new or variables is none %}#eceff1{% else %}{{ variables.noroleusers }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Main Background Color (<code>--main</code>):<span>
+                <input id="css_var_main" class="jscolor {hash:true}" value="{% if new or variables is none %}#455a64{% else %}{{ variables.main }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Text input placeholder (<code>--placeholder</code>):<span>
+                <input id="css_var_placeholder" class="jscolor {hash:true}" value="{% if new or variables is none %}#636363{% else %}{{ variables.placeholder }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Sidebar Dividers (<code>--sidebardivider</code>):<span>
+                <input id="css_var_sidebardivider" class="jscolor {hash:true}" value="{% if new or variables is none %}#90a4ae{% else %}{{ variables.sidebardivider }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Left Sidebar/Guild Navigation Background (<code>--leftsidebar</code>):<span>
+                <input id="css_var_leftsidebar" class="jscolor {hash:true}" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.leftsidebar }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Right Sidebar/Member List Background (<code>--rightsidebar</code>):<span>
+                <input id="css_var_rightsidebar" class="jscolor {hash:true}" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.rightsidebar }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Header Background (<code>--header</code>):<span>
+                <input id="css_var_header" class="jscolor {hash:true}" value="{% if new or variables is none %}#263238{% else %}{{ variables.header }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Chat Message (<code>--chatmessage</code>):<span>
+                <input id="css_var_chatmessage" class="jscolor {hash:true}" value="{% if new or variables is none %}#c3c4c5{% else %}{{ variables.chatmessage }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Discriminator Text (<code>--discrim</code>):<span>
+                <input id="css_var_discrim" class="jscolor {hash:true}" value="{% if new or variables is none %}#FFFFFF{% else %}{{ variables.discrim }}{% endif %}">
+            </div>
+            <div class="col m6 s12">
+                <span>Message Box Background (<code>--chatbox</code>):<span>
+                <input id="css_var_chatbox" class="jscolor {hash:true}" value="{% if new or variables is none %}#37474f{% else %}{{ variables.chatbox }}{% endif %}">
+            </div>
+        </div>
+        <p><strong>TIP!</strong> You can use the variables in your CSS below! Something like <code>color: var(--leftsidebar);</code> would work!</p>
+    </div>
     <div class="col s12">
         <p class="flow-text">Edit your CSS code here</p>
         <div style="position: relative; height: 40vh;">
@@ -45,6 +95,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
 
 {% block script %}
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" integrity="sha256-xrr4HH5eSY+cFz4SH7ja/LaAi9qcEdjMpeMP49/iOLs=" crossorigin="anonymous"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js" integrity="sha256-y1h79SSb3icyBC/BrLCzoexQZAOGwlvoAr85biY4QGw=" crossorigin="anonymous"></script>
 <script>
     const newCSS = {% if new %}true{% else %}false{% endif %};
 </script>