Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2024-11-14 18:11:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'cssvars' into master

Browse Source
This commit is contained in:
Jeremy "EndenDragon" Zhang 2017-09-07 14:41:30 -07:00 committed by GitHub
commit 56e7b3e9d2
7 changed files with 133 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
webapp/alembic/versions/058f970b85db_added_css_variables_column.py Normal file
View File

@ -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 ###

27
webapp/titanembeds/blueprints/embed/embed.py
View File

@ -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,6 +60,7 @@ 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,
@ -44,7 +68,8 @@ def guild_embed(guild_id):
unauth_enabled=guild_query_unauth_users_bool(guild_id),
visitors_enabled=guild_accepts_visitors(guild_id),
client_id=config['client-id'],
css=get_custom_css()
css=customcss,
cssvariables=parse_css_variable(customcss)
)
abort(404)

8
webapp/titanembeds/blueprints/user/user.py
View File

@ -7,6 +7,7 @@ from titanembeds.oauth import authorize_url, token_url, make_authenticated_sessi
import time
import datetime
import paypalrestsdk
import json
user = Blueprint("user", __name__)
@ -97,7 +98,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})
@ -113,7 +114,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()
@ -128,6 +130,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:
@ -135,6 +138,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})

4
webapp/titanembeds/database/user_css.py
View File

@ -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().with_variant(db.Text(4294967295), 'mysql')) # 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

19
webapp/titanembeds/static/js/usercss.js
View File

@ -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) {

2
webapp/titanembeds/templates/embed.html.j2
View File

@ -20,7 +20,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>

51
webapp/titanembeds/templates/usercss.html.j2
View File

@ -31,6 +31,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;">
@ -49,6 +99,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>