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

Merge pull request #49 from TitanEmbeds/cssvars

Browse Source 
Implement CSS variables
This commit is contained in:
Jeremy "EndenDragon" Zhang 2017-09-07 17:15:53 -07:00 committed by GitHub
commit e85d62008e
8 changed files with 325 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/alembic/versions/058f970b85db_added_css_variables_column.py
View File

@ -1,14 +1,14 @@
"""Added CSS Variables Column
Revision ID: 058f970b85db
Revises: 95ab6a63135d
Revises: dadcb876cdd9
Create Date: 2017-06-04 22:51:34.297399
"""
# revision identifiers, used by Alembic.
revision = '058f970b85db'
down_revision = '95ab6a63135d'
down_revision = 'dadcb876cdd9'
branch_labels = None
depends_on = None
@ -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 ###

259
webapp/alembic/versions/f65629d470c6_add_css_variable_toggle_column.py Normal file
View File

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

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

@ -93,12 +93,14 @@ def new_custom_css_post():
name = request.form.get("name", None)
user_id = session["user_id"]
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:
name = name.strip()
css = css.strip()
css = UserCSS(name, user_id, None, css)
css = UserCSS(name, user_id, variables_enabled, variables, css)
db.session.add(css)
db.session.commit()
return jsonify({"id": css.id})
@ -114,7 +116,10 @@ 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
print(variables)
if variables:
variables = json.loads(variables)
return render_template("usercss.html.j2", new=False, css=css, variables=variables)
@user.route("/custom_css/edit/<css_id>", methods=["POST"])
@ -131,6 +136,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 +145,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})

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

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

67
webapp/titanembeds/static/css/embedstyle.css
View File

@ -27,7 +27,7 @@
}
html {
background-color: #455a64;
background-color: var(--main);
color: white;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
}
@ -43,12 +43,12 @@ footer {
left: 0;
right: 0;
height: 50px;
background-color: #37474f;
background-color: var(--chatbox);
}
nav {
background-color: #263238;
background: linear-gradient(rgba(38, 50, 56, 1), rgba(255,0,0,0));
background-color: var(--header);
background: linear-gradient(var(--header), rgba(255,0,0,0));
box-shadow: none;
}
@ -62,20 +62,6 @@ nav .brand-logo {
}
}
body > div.navbar-fixed > nav > div {
background: #263238 background: -webkit-linear-gradient(#263238, #37474f, #455a64);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#263238, #37474f, #455a64);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#263238, #37474f, #455a64);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#263238, #37474f, #455a64);
/* Standard syntax */
}
@media only screen and (min-width: 993px) {
.container {
width: 85%;
@ -101,8 +87,20 @@ body > div.navbar-fixed > nav > div {
font-variant: small-caps;
}
#members-nav {
background-color: var(--rightsidebar);
}
#members-nav li>a {
color: var(--noroleusers);
}
#guild-nav {
background-color: var(--leftsidebar);
}
.side-nav div.divider {
background-color: #90a4ae;
background-color: var(--sidebardivider);
margin-left: 10px;
margin-right: 10px;
}
@ -177,23 +175,23 @@ body > div.navbar-fixed > nav > div {
}
::-webkit-input-placeholder {
color: rgb(99, 99, 99);
color: var(--placeholder);
}
:-moz-placeholder {
color: rgb(99, 99, 99);
color: var(--placeholder);
}
::-moz-placeholder {
color: rgb(99, 99, 99);
color: var(--placeholder);
}
:-ms-input-placeholder {
color: rgb(99, 99, 99);
color: var(--placeholder);
}
::-ms-input-placeholder {
color: rgb(99, 99, 99);
color: var(--placeholder);
}
#discord-members > li > a.subheader,
@ -264,6 +262,7 @@ body > div.navbar-fixed > nav > div {
#curuser_discrim {
font-size: 50%;
color: var(--discrim);
}
#curuser_discrim,
@ -286,7 +285,7 @@ body > div.navbar-fixed > nav > div {
}
.modal {
background-color: #546e7a;
background-color: var(--modal);
}
.modal-overlay {
@ -411,7 +410,7 @@ a {
}
.chatmessage {
display: inline;
color: rgb(195, 196, 197);
color: var(--chatmessage);
}
p.mentioned {
@ -481,4 +480,20 @@ p.mentioned span.chatmessage {
line-height: 0;
position: relative;
top: -5px;
}
/* CSS Variables */
:root {
/*--<var>: <value>*/
--modal: #546E7A;
--noroleusers: #ECEFF1;
--main: #455A64;
--placeholder: #636363;
--sidebardivider: #90A4AE;
--leftsidebar: #607D8B;
--rightsidebar: #607D8B;
--header: #263238;
--chatmessage: #C3C4C5;
--discrim: #FFFFFF;
--chatbox: #37474F;
}

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

@ -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();
}

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">{% if cssvariables is not none %}{{ cssvariables }}{% endif %} {{ css.css }}</style>
<style id="user-defined-css">{% if cssvariables is not none and css.css_var_bool %}{{ cssvariables }}{% endif %} {{ css.css }}</style>
{% endif %}
</head>
<body>

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

@ -18,7 +18,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
<p><strong>This user defined CSS has a unique ID of <em style="font-size: 130%;">{{ css.id }}</em>.</strong></p>
<p>To use this CSS in the embed, you must apped a <code>?css={{ css.id }}</code> to the embed URL.</p>
<p>Something like this will work:</p>
<input readonly value="https://titanembeds.com/embed/1234567890987654321?css={{ css.id }}" id="disabled" type="text" onClick="this.setSelectionRange(48, this.value.length)">
<input readonly value="https://titanembeds.com/embed/1234567890987654321?css={{ css.id }}" id="disabled" type="text" onClick="this.setSelectionRange(this.value.indexOf(&quot;?&quot;), this.value.length)">
</div>
</div>
</div>
@ -33,6 +33,10 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
</div>
<div class="col s12">
<p class="flow-text">Propose Predefined CSS variables here</p>
<p>
<input type="checkbox" id="toggleCSSVar" {% if not new and css.css_var_bool %}checked{% endif %}/>
<label for="toggleCSSVar">CSS Variables Enabled</label>
</p>
<div class="row">
<div class="col m6 s12">
<span>Modal Background Color (<code>--modal</code>):<span>