From a293b89b8c1dea9adeec51ea41180085545dd344 Mon Sep 17 00:00:00 2001 From: Jeremy Zhang Date: Thu, 7 Sep 2017 23:35:34 +0000 Subject: [PATCH] CSS Variables fix --- ...058f970b85db_added_css_variables_column.py | 2 +- ...29d470c6_add_css_variable_toggle_column.py | 259 ++++++++++++++++++ webapp/titanembeds/blueprints/user/user.py | 6 +- webapp/titanembeds/database/user_css.py | 8 +- webapp/titanembeds/static/js/usercss.js | 3 +- webapp/titanembeds/templates/embed.html.j2 | 2 +- webapp/titanembeds/templates/usercss.html.j2 | 6 +- 7 files changed, 278 insertions(+), 8 deletions(-) create mode 100644 webapp/alembic/versions/f65629d470c6_add_css_variable_toggle_column.py diff --git a/webapp/alembic/versions/058f970b85db_added_css_variables_column.py b/webapp/alembic/versions/058f970b85db_added_css_variables_column.py index 3ff345c..c21e6b1 100644 --- a/webapp/alembic/versions/058f970b85db_added_css_variables_column.py +++ b/webapp/alembic/versions/058f970b85db_added_css_variables_column.py @@ -18,7 +18,7 @@ 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)) + op.add_column('user_css', sa.Column('css_variables', sa.Text())) # ### end Alembic commands ### diff --git a/webapp/alembic/versions/f65629d470c6_add_css_variable_toggle_column.py b/webapp/alembic/versions/f65629d470c6_add_css_variable_toggle_column.py new file mode 100644 index 0000000..7f626c4 --- /dev/null +++ b/webapp/alembic/versions/f65629d470c6_add_css_variable_toggle_column.py @@ -0,0 +1,259 @@ +"""Add css variable toggle column + +Revision ID: f65629d470c6 +Revises: 058f970b85db +Create Date: 2017-09-07 23:08:34.344304 + +""" + +# revision identifiers, used by Alembic. +revision = 'f65629d470c6' +down_revision = '058f970b85db' +branch_labels = None +depends_on = None + +from alembic import op +import sqlalchemy as sa +from sqlalchemy.dialects import postgresql + +def upgrade(): + # ### commands auto generated by Alembic - please adjust! ### + op.alter_column('administrators', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('authenticated_users', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('authenticated_users', 'last_timestamp', + existing_type=postgresql.TIMESTAMP(timezone=True), + type_=sa.TIMESTAMP(), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.alter_column('cosmetics', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('guild_members', 'discriminator', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False) + op.alter_column('guild_members', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('guilds', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('guilds', 'mentions_limit', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False, + existing_server_default=sa.text('(-1)::bigint')) + op.alter_column('keyvalue_properties', 'expiration', + existing_type=postgresql.TIMESTAMP(timezone=True), + type_=sa.TIMESTAMP(), + existing_nullable=True) + op.alter_column('keyvalue_properties', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('messages', 'edited_timestamp', + existing_type=postgresql.TIMESTAMP(timezone=True), + type_=sa.TIMESTAMP(), + existing_nullable=True) + op.alter_column('messages', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('messages', 'timestamp', + existing_type=postgresql.TIMESTAMP(timezone=True), + type_=sa.TIMESTAMP(), + nullable=False) + op.alter_column('titan_tokens', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('titan_tokens', 'tokens', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False) + op.alter_column('token_transactions', 'end_tokens', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False) + op.alter_column('token_transactions', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('token_transactions', 'net_tokens', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False) + op.alter_column('token_transactions', 'start_tokens', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False) + op.alter_column('token_transactions', 'timestamp', + existing_type=postgresql.TIMESTAMP(timezone=True), + type_=sa.TIMESTAMP(), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.alter_column('unauthenticated_bans', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('unauthenticated_bans', 'last_discriminator', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False) + op.alter_column('unauthenticated_bans', 'timestamp', + existing_type=postgresql.TIMESTAMP(timezone=True), + type_=sa.TIMESTAMP(), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.alter_column('unauthenticated_users', 'discriminator', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + existing_nullable=False) + op.alter_column('unauthenticated_users', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + op.alter_column('unauthenticated_users', 'last_timestamp', + existing_type=postgresql.TIMESTAMP(timezone=True), + type_=sa.TIMESTAMP(), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.add_column('user_css', sa.Column('css_var_bool', sa.Boolean(), nullable=False, server_default="0")) + op.alter_column('user_css', 'css_variables', + existing_type=sa.TEXT()) + op.alter_column('user_css', 'id', + existing_type=sa.BIGINT(), + type_=sa.Integer(), + autoincrement=True) + # ### end Alembic commands ### + + +def downgrade(): + # ### commands auto generated by Alembic - please adjust! ### + op.alter_column('user_css', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('user_css', 'css_variables', + existing_type=sa.TEXT(), + nullable=True) + op.drop_column('user_css', 'css_var_bool') + op.alter_column('unauthenticated_users', 'last_timestamp', + existing_type=sa.TIMESTAMP(), + type_=postgresql.TIMESTAMP(timezone=True), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.alter_column('unauthenticated_users', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('unauthenticated_users', 'discriminator', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False) + op.alter_column('unauthenticated_bans', 'timestamp', + existing_type=sa.TIMESTAMP(), + type_=postgresql.TIMESTAMP(timezone=True), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.alter_column('unauthenticated_bans', 'last_discriminator', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False) + op.alter_column('unauthenticated_bans', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('token_transactions', 'timestamp', + existing_type=sa.TIMESTAMP(), + type_=postgresql.TIMESTAMP(timezone=True), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.alter_column('token_transactions', 'start_tokens', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False) + op.alter_column('token_transactions', 'net_tokens', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False) + op.alter_column('token_transactions', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('token_transactions', 'end_tokens', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False) + op.alter_column('titan_tokens', 'tokens', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False) + op.alter_column('titan_tokens', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('messages', 'timestamp', + existing_type=sa.TIMESTAMP(), + type_=postgresql.TIMESTAMP(timezone=True), + nullable=True) + op.alter_column('messages', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('messages', 'edited_timestamp', + existing_type=sa.TIMESTAMP(), + type_=postgresql.TIMESTAMP(timezone=True), + existing_nullable=True) + op.alter_column('keyvalue_properties', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('keyvalue_properties', 'expiration', + existing_type=sa.TIMESTAMP(), + type_=postgresql.TIMESTAMP(timezone=True), + existing_nullable=True) + op.alter_column('guilds', 'mentions_limit', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False, + existing_server_default=sa.text('(-1)::bigint')) + op.alter_column('guilds', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('guild_members', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('guild_members', 'discriminator', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + existing_nullable=False) + op.alter_column('cosmetics', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('authenticated_users', 'last_timestamp', + existing_type=sa.TIMESTAMP(), + type_=postgresql.TIMESTAMP(timezone=True), + existing_nullable=False, + existing_server_default=sa.text('now()')) + op.alter_column('authenticated_users', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + op.alter_column('administrators', 'id', + existing_type=sa.Integer(), + type_=sa.BIGINT(), + autoincrement=True) + # ### end Alembic commands ### diff --git a/webapp/titanembeds/blueprints/user/user.py b/webapp/titanembeds/blueprints/user/user.py index a6822f9..77c94cf 100644 --- a/webapp/titanembeds/blueprints/user/user.py +++ b/webapp/titanembeds/blueprints/user/user.py @@ -114,7 +114,9 @@ def edit_custom_css_get(css_id): abort(404) if css.user_id != session['user_id']: abort(403) - variables = json.loads(css.css_variables) + variables = css.css_variables + if variables: + variables = json.loads(variables) return render_template("usercss.html.j2", new=False, css=css, variables=variables) @user.route("/custom_css/edit/", methods=["POST"]) @@ -131,6 +133,7 @@ def edit_custom_css_post(css_id): name = request.form.get("name", None) css = request.form.get("css", "") variables = request.form.get("variables", None) + variables_enabled = request.form.get("variables_enabled", False) in ["true", True] if not name: abort(400) else: @@ -139,6 +142,7 @@ def edit_custom_css_post(css_id): dbcss.name = name dbcss.css = css dbcss.css_variables = variables + dbcss.css_var_bool = variables_enabled db.session.commit() return jsonify({"id": dbcss.id}) diff --git a/webapp/titanembeds/database/user_css.py b/webapp/titanembeds/database/user_css.py index 36f3c4f..ce7cf7a 100644 --- a/webapp/titanembeds/database/user_css.py +++ b/webapp/titanembeds/database/user_css.py @@ -5,11 +5,13 @@ 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 + css_var_bool = db.Column(db.Boolean(), nullable=False, server_default="0") # If css variables should be taken into consideration + 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_variables=None, css=None): + def __init__(self, name, user_id, css_var_bool=False, css_variables=None, css=None): self.name = name self.user_id = user_id + self.css_var_bool = css_var_bool self.css_variables = css_variables self.css = css diff --git a/webapp/titanembeds/static/js/usercss.js b/webapp/titanembeds/static/js/usercss.js index efff530..3720b2b 100644 --- a/webapp/titanembeds/static/js/usercss.js +++ b/webapp/titanembeds/static/js/usercss.js @@ -4,12 +4,13 @@ function postForm() { var name = $('#css_name').val(); + var var_enabled = $("#toggleCSSVar").is(':checked'); var variables = JSON.stringify(formatCSSVars()); var css = editor.getValue(); var funct = $.ajax({ dataType: "json", method: "POST", - data: {"name": name, "variables": variables, "css": css} + data: {"name": name, "variables_enabled": var_enabled, "variables": variables, "css": css} }); return funct.promise(); } diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2 index cacdc9f..a76faf3 100644 --- a/webapp/titanembeds/templates/embed.html.j2 +++ b/webapp/titanembeds/templates/embed.html.j2 @@ -20,7 +20,7 @@ {% include 'google_analytics.html.j2' %} {% if css is not none %} - + {% endif %} diff --git a/webapp/titanembeds/templates/usercss.html.j2 b/webapp/titanembeds/templates/usercss.html.j2 index 4afd28b..eaf523a 100644 --- a/webapp/titanembeds/templates/usercss.html.j2 +++ b/webapp/titanembeds/templates/usercss.html.j2 @@ -18,7 +18,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the

This user defined CSS has a unique ID of {{ css.id }}.

To use this CSS in the embed, you must apped a ?css={{ css.id }} to the embed URL.

Something like this will work:

- + @@ -33,6 +33,10 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the

Propose Predefined CSS variables here

+

+ + +

Modal Background Color (--modal):