Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Improved theme selection UI
Now it's fancy, and gives previews, both as an iframe and when you
select them! Closes #37
  • Loading branch information
RossBrunton committed Sep 20, 2017
1 parent a250238 commit 7c36dae
Show file tree
Hide file tree
Showing 13 changed files with 211 additions and 33 deletions.
14 changes: 14 additions & 0 deletions bmat/static/scripts.js
Expand Up @@ -215,6 +215,19 @@ window.bmatFn = function() {
form.find("[data-selected]")[0].removeAttribute("data-selected");
this.setAttribute("data-selected", "data-selected");
});

// And the theme picker
$(".theme-picker .iframe-box").on("click", function(e) {
var form = $(this).parents("form");
var value = $(this).data("value");

form.find("input[name=theme]").val(value);
form.find("[data-selected]")[0].removeAttribute("data-selected");
this.setAttribute("data-selected", "data-selected");

// Change the theme of the page
$("#themeLink").attr("href", $("#themeLink").data("prefix") + value + ".css");
});
};

// Removes all listeners
Expand All @@ -238,6 +251,7 @@ window.bmatFn = function() {
$(".editTitle").off();

$(".colour-select .colour").off();
$(".theme-picker .iframe-box").off();
};

// Downloads a bookmark by an id and adds it to the list; used when adding a new one
Expand Down
18 changes: 18 additions & 0 deletions bmat/static/styles.css
Expand Up @@ -205,6 +205,10 @@ nav a:hover {
box-sizing:border-box;
}

.theme-picker [data-selected] iframe {
border:2px solid #e9c229;
}

/*
* Top part of a block
*/
Expand Down Expand Up @@ -381,6 +385,20 @@ input[type=text], input[type=password], input[type=email] {
flex: 1 1 0;
}

.theme-picker {
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.theme-picker iframe {
margin:4px;
border-radius:4px;
height:200px;
width:323px;
pointer-events:none;
}

/*
* Home Page
*/
Expand Down
6 changes: 5 additions & 1 deletion bmat/static/theme_dark.css
Expand Up @@ -81,14 +81,18 @@ input[type=submit], button, select {
padding:4px;
}

.theme-picker iframe {
border:2px solid #666666;
}

/*
* Colour picker
*/
.colour-select .colour-list {
border:2px solid #666666;
}

.colour-select .colour[data-selected] {
.colour-select .colour[data-selected], .theme-picker [data-selected] iframe {
border-color:#dd7755;
}

Expand Down
4 changes: 4 additions & 0 deletions bmat/static/theme_grey_boxes.css
Expand Up @@ -41,6 +41,10 @@ input[type=text], input[type=password], input[type=email] {
background-color:#f8f8f8;
}

.theme-picker iframe {
border:2px solid #cccccc;
}

/*
* Colour picker
*/
Expand Down
4 changes: 4 additions & 0 deletions bmat/static/theme_light.css
Expand Up @@ -55,6 +55,10 @@ input[type=text], input[type=password], input[type=email] {
background-color:#f8f8f8;
}

.theme-picker iframe {
border:1px solid #cccccc;
}

/*
* Colour picker
*/
Expand Down
3 changes: 2 additions & 1 deletion bmat/templates/base.html
Expand Up @@ -4,7 +4,8 @@
<head>
<title>{% block title %}No Title{% endblock %}</title>
<link rel='stylesheet' href='{% static "styles.css" %}'/>
<link rel='stylesheet' href='{% static "theme_"|add:theme|add:".css" %}'/>
<link rel='stylesheet' href='{% static "theme_"|add:theme|add:".css" %}' id='themeLink'
data-prefix='{% static "theme_" %}'/>
<style>
.button {
background-image:url('{% static "icons.png" %}');
Expand Down
19 changes: 17 additions & 2 deletions users/forms.py
Expand Up @@ -5,6 +5,13 @@

from users.models import Settings

class ThemeSelect(forms.widgets.ChoiceWidget):
input_type = "input"
template_name = "users/forms/themeSelect.html"
option_template_name = "users/forms/themeSelectOption.html"
checked_attribute = {"data-selected": True}
option_inherits_attrs = False

class ImportForm(forms.Form):
""" The form used to import a bookmark file """
use_tags = forms.BooleanField(required=False)
Expand All @@ -15,10 +22,18 @@ class CustomUserCreationForm(UserCreationForm):
email = forms.EmailField(required=False)

class SettingsForm(forms.ModelForm):
""" And a form to edit settings, specifically the theme """
""" And a form to edit settings """
class Meta:
model = Settings
fields = ("url_settings", "no_analytics", "hide_settings")

class ThemeForm(forms.ModelForm):
""" And a form to edit theme settings """
class Meta:
model = Settings
fields = ("theme", "url_settings", "no_analytics", "hide_settings")
fields = ("theme",)

theme = forms.ChoiceField(choices=Settings.THEME_OPTIONS, widget=ThemeSelect)

class EmailForm(forms.ModelForm):
""" And a form to edit settings, specifically the theme """
Expand Down
6 changes: 6 additions & 0 deletions users/templates/users/forms/themeSelect.html
@@ -0,0 +1,6 @@
<div class='theme-picker'>
<input name='{{ widget.name }}' type='hidden' value='{{ widget.value.0 }}'{% include "django/forms/widgets/attrs.html" %}>
{% for group_name, group_choices, group_index in widget.optgroups %}
{% for option in group_choices %}{% include option.template_name with widget=option %}{% endfor %}
{% endfor %}
</div>
3 changes: 3 additions & 0 deletions users/templates/users/forms/themeSelectOption.html
@@ -0,0 +1,3 @@
<div class='iframe-box' data-value='{{ widget.value }}'{% include "django/forms/widgets/attrs.html" %}>
<iframe src='{% url "user:preview" %}?t={{ widget.value }}'></iframe>
</div>
14 changes: 12 additions & 2 deletions users/templates/users/index.html
Expand Up @@ -65,8 +65,6 @@
<div class='box center'>
<form method='POST' action='{% url "user:home" %}'>
{% csrf_token %}
<label>Theme<br/>
{{ settings_form.theme }}</label><br/><br/>
<label>Invalid URL Handling<br/>
{{ settings_form.url_settings }}</label><br/><br/>
<label>{{ settings_form.no_analytics }} Opt out of anonymous usage tracking</label><br/>
Expand Down Expand Up @@ -98,6 +96,18 @@
</section>
</div>

<div class='box title'>
Site Theme
</div>

<div class='box center'>
<form action='{% url "user:theme_change" %}' method='POST'>
{% csrf_token %}
{{ theme_form.theme }}
<input type='submit' value='Set Theme'/>
</form>
</div>

<div class='box title'>
Import and Export
</div>
Expand Down
69 changes: 69 additions & 0 deletions users/templates/users/preview.html
@@ -0,0 +1,69 @@
{% load static bookmark %}
<!DOCTYPE html>
<html>
<head>
<title>Theme Preview</title>
<link rel='stylesheet' href='{% static "styles.css" %}'/>
<link rel='stylesheet' href='{% static "theme_"|add:preview_theme|add:".css" %}'/>
<style>
.button {
background-image:url('{% static "icons.png" %}');
}

:root {
overflow:hidden;
zoom:0.5;
}
</style>

<script async src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script async src='{% static "scripts.js" %}'></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
<nav>
{% if user.is_authenticated %}
<a href='{% url "bookmarks:home" %}' {% if area == "bookmarks" %}class='active'{% endif %}>
Bookmarks
</a>

<a href='{% url "tags:home" %}' {% if area == "tags" %}class='active'{% endif %}>
Tags
</a>

<a href='{% url "search:home" %}' {% if area == "search" %}class='active'{% endif %}>
Search
</a>

{% if not user.settings.hide_settings %}
<a href='{% url "user:home" %}' {% if area == "user" %}class='active'{% endif %}>
Settings
</a>
{% endif %}

{% for t in pinned_tags %}
<a href='{% url "tags:filter" tag=t.slug %}' {% if tag.pk == t.pk %}class='active'{% endif %}>
{{ t.name }}
</a>
{% endfor %}
{% else %}
<a href='{% url "user:login"%}' class='active'>
Log In
</a>
{% endif %}
</nav>

<main>
<div id='bookmark-list'>
{% for bm in bookmarks %}
{% bookmark bm %}
{% empty %}
<div class='box'>
You have no bookmarks; how do you expect to pick a theme!?
</div>
{% endfor %}
</div>
</main>
</body>
</html>
4 changes: 4 additions & 0 deletions users/urls.py
Expand Up @@ -6,6 +6,7 @@
- logout
- login
- register
- preview
And the URLs used by Django's password reset thing:
- reset
Expand All @@ -26,11 +27,14 @@
url(r"^import$", views.importFile, name="import"),
url(r"^pass_change$", views.pass_change, name="pass_change"),
url(r"^email_change$", views.email_change, name="email_change"),
url(r"^theme_change$", views.theme_change, name="theme_change"),

url(r"^logout$", views.logout, name="logout"),
url(r"^login$", views.login, name="login"),
url(r"^register$", views.register, name="register"),

url(r"^preview$", views.preview, name="preview"),

url(r"^make_trial$", views.make_trial, name="make_trial"),
url(r"^upgrade$", views.upgrade, name="upgrade"),

Expand Down

0 comments on commit 7c36dae

Please sign in to comment.