From dab3b1ebdf2f01ef2cbba6df0508ebbd1c397e4d Mon Sep 17 00:00:00 2001 From: crunk Date: Fri, 14 Jan 2022 18:11:01 +0100 Subject: [PATCH] Css Editor made with very minimal js. Distribusi Workflow currently very buggy --- README.md | 7 ++++-- verse/forms/editorform.py | 21 ++++++++++++++++ verse/start.py | 42 ++++++++++++++++++++++++++------ verse/static/css/editor.css | 34 ++++++++++++++++++++++++++ verse/static/css/style.css | 13 +++++++--- verse/static/js/editorupdate.js | 14 +++++++++++ verse/templates/base.html | 2 +- verse/templates/distribusi.html | 2 +- verse/templates/editor.html | 43 +++++++++++++++++++++++++++++++++ 9 files changed, 163 insertions(+), 15 deletions(-) create mode 100644 verse/forms/editorform.py create mode 100644 verse/static/css/editor.css create mode 100644 verse/static/js/editorupdate.js create mode 100644 verse/templates/editor.html diff --git a/README.md b/README.md index 34cfb03..8ad47c2 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,12 @@ This particular work in progress project is an attempt to make distribusi into a This project is made for Autonomous Practices at the WDKA in Rotterdam. ## Work in progress -~~Nothing is working yet but I need to do this project in smaller steps then everything in one go.~~ -So far, in this project you can make a user, upload a zip, make a website name and have distribusi +1. ~~Nothing is working yet but I need to do this project in smaller steps then everything in one go.~~ +2. So far, in this project you can make a user, upload a zip, make a website name and have distribusi run it for you. +3. There is a css editor and a theme selector, but very buggy. +I am still developing a lot of features and I want to finish them first before +I do a first pass, fixing issues and refactoring code. ## Start your engines! diff --git a/verse/forms/editorform.py b/verse/forms/editorform.py new file mode 100644 index 0000000..baf5d64 --- /dev/null +++ b/verse/forms/editorform.py @@ -0,0 +1,21 @@ +"""Form to save your CSS editor work.""" +from wtforms import ( + StringField, + TextAreaField, + SubmitField, +) + +from wtforms import validators +from wtforms.validators import Length +from flask_wtf import FlaskForm + + +class EditorForm(FlaskForm): + """Css editor form class.""" + + cssname = StringField( + "fill in a name for your css style:", + validators=[validators.InputRequired(), Length(5, 200)], + ) + css = TextAreaField() + submit = SubmitField("Save") diff --git a/verse/start.py b/verse/start.py index 45dd7da..5440241 100644 --- a/verse/start.py +++ b/verse/start.py @@ -42,6 +42,7 @@ from forms.registerform import RegisterForm from forms.uploadform import UploadForm from forms.distribusiform import DistribusiForm from forms.themeform import ThemeForm +from forms.editorform import EditorForm # Tada! from distribusi.cli import build_argparser @@ -138,20 +139,21 @@ def distribusi(): zipfilename = "{}.zip".format(user.distribusiname) userfolder = os.path.join("stash", user.distribusiname) unzipfile = os.path.join(userfolder, zipfilename) - with zipfile.ZipFile(unzipfile, "r") as zip_ref: - # To do, replace extractall with inspection and extract - zip_ref.extractall(userfolder) - - os.remove(os.path.join(userfolder, zipfilename)) + if os.path.exists(unzipfile): + with zipfile.ZipFile(unzipfile, "r") as zip_ref: + # To do, replace extractall with inspection and extract + zip_ref.extractall(userfolder) + if os.path.exists(unzipfile): + os.remove(os.path.join(userfolder, zipfilename)) # To Do: Make sure nothing can be executed from the upload folder # add the css file cssfile = "" for filename in os.listdir(userfolder): - if filename.endswith('.css'): + if filename.endswith(".css"): cssfile = os.path.join(userfolder, filename) parser = build_argparser() - args = parser.parse_args(['-s', cssfile]) + args = parser.parse_args(["-s", cssfile]) distribusify(args, userfolder) return redirect(url_for("index")) template = render_template( @@ -196,7 +198,7 @@ def upload(): return template -@APP.route("/theme", methods=["POST"]) +@APP.route("/theme", methods=["GET", "POST"]) @login_required def theme(): uploadform = UploadForm() @@ -220,6 +222,30 @@ def theme(): return template +@APP.route("/editor", methods=["GET", "POST"]) +@login_required +def editor(): + editorform = EditorForm() + user = User.query.filter_by(email=current_user.email).first() + files_uploaded = True + if user.distribusiname is None: + files_uploaded = False + print("no folder to add css to!") + if editorform.validate_on_submit(): + userfolder = os.path.join("stash", user.distribusiname) + cssfilename = "{}.css".format(editorform.cssname.data) + with open(os.path.join(userfolder, cssfilename), 'w') as cssfile: + cssfile.write(editorform.css.data) + cssfile.close + + template = render_template( + "editor.html", + files_uploaded=files_uploaded, + editorform=editorform, + ) + return template + + @APP.route("/stash/") def distribusistash(path): return send_from_directory("stash", path) diff --git a/verse/static/css/editor.css b/verse/static/css/editor.css new file mode 100644 index 0000000..5241df7 --- /dev/null +++ b/verse/static/css/editor.css @@ -0,0 +1,34 @@ +.editareas { + width: 100%; + margin: auto; + display: flex; + justify-content: flex-start; +} +.editarea { + border: 1px solid #E0B0FF; + margin-right: 1em; +} + +.editor { + min-width: 40%; +} + +textarea { + width: 100%; + height: 100%; + box-sizing: border-box; + min-height: 250px; + overflow: scroll; + background: #E0B0FF; + outline: none; + font-family: Courier, sans-serif; + font-size: 16px; +} + +iframe { + bottom: 0; + position: relative; + margin-top: 1em; + width: 100%; + height: 30em; +} diff --git a/verse/static/css/style.css b/verse/static/css/style.css index 13bc7c0..140b722 100644 --- a/verse/static/css/style.css +++ b/verse/static/css/style.css @@ -20,7 +20,7 @@ div#login form { padding-right: 15%; } -div#login input[type=text], input[type=password]{ +input[type=text], input[type=password], input[type=file]{ background-color: #383C4A; color: white; border: 1px solid #E0B0FF; @@ -72,17 +72,24 @@ fieldset.required { border: none; } -.button input { +input { border: none; background: #E0B0FF; text-decoration: none; margin: 1px; } -.button input:hover { +input:hover { background: #60337F; } +input[type="submit"]:disabled:hover, +input[type="submit"]:disabled, +input[type="submit"]:disabled:focus { + background: #777777; + color: #d28cff; +} + /* unvisited link */ a:link { color: red; diff --git a/verse/static/js/editorupdate.js b/verse/static/js/editorupdate.js new file mode 100644 index 0000000..5573d72 --- /dev/null +++ b/verse/static/js/editorupdate.js @@ -0,0 +1,14 @@ +function update() { + +var html = document.getElementById("html"); +var css = document.getElementById("css"); +var code = document.getElementById("code").contentWindow.document; + +document.body.onkeyup = function(){ + code.open(); + code.writeln(html.value+""); + code.close(); + }; +}; + +update(); diff --git a/verse/templates/base.html b/verse/templates/base.html index 52b5b99..e81f857 100644 --- a/verse/templates/base.html +++ b/verse/templates/base.html @@ -5,7 +5,7 @@ Autonomous Practices X Distribusi-Verse - + diff --git a/verse/templates/distribusi.html b/verse/templates/distribusi.html index d7c45fe..5aea030 100644 --- a/verse/templates/distribusi.html +++ b/verse/templates/distribusi.html @@ -48,7 +48,7 @@

(Optional) Step 3: Edit

-

go to CSS editor

+

Go to CSS editor
diff --git a/verse/templates/editor.html b/verse/templates/editor.html new file mode 100644 index 0000000..948dabc --- /dev/null +++ b/verse/templates/editor.html @@ -0,0 +1,43 @@ +{% extends "base.html" %} +{% block main %} +
+
+
+
+ +
+
+ {{ editorform.csrf_token }} +
+
+ {{ editorform.css(placeholder="Try out your CSS here") }} + {% for message in editorform.css.errors %} +
{{ message }}
+ {% endfor %} +
+
+
+ {% if files_uploaded %} +
+ {{ editorform.cssname.label }} + {{ editorform.cssname }} + {% for message in editorform.cssname.errors %} +
{{ message }}
+ {% endfor %} +
+
+ {{ editorform.submit }} +
+ {% else %} +

+ You need to upload your files first before you can save a css file. +

+ {% endif %} +
+
+
+ + + + +{% endblock main %}