Skip to content

Commit 77ef8c8

Browse files
Sak1012Sak1012
committed
WIP
1 parent 49ff2e0 commit 77ef8c8

File tree

11 files changed

+232
-53
lines changed

11 files changed

+232
-53
lines changed

‎app/eventyay/control/views/event.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ def form_valid(self, form):
224224

225225
tickets.invalidate_cache.apply_async(kwargs={'event': self.request.event.pk})
226226
if change_css:
227-
regenerate_css.apply_async(args=(self.request.event.pk,))
227+
transaction.on_commit(lambda: regenerate_css.apply(args=(self.request.event.pk,)))
228228
messages.success(
229229
self.request,
230230
_(

‎app/eventyay/control/views/organizer_views/organizer_view.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ def form_valid(self, form):
147147
)
148148

149149
if change_css:
150-
regenerate_organizer_css.apply_async(args=(self.request.organizer.pk,))
150+
transaction.on_commit(lambda: regenerate_organizer_css.apply(args=(self.request.organizer.pk,)))
151151
messages.success(
152152
self.request,
153153
_(

‎app/eventyay/eventyay_common/views/event.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ def form_valid(self, form):
367367
tickets.invalidate_cache.apply_async(kwargs={'event': self.request.event.pk})
368368

369369
if self.sform.has_changed() and any(p in self.sform.changed_data for p in SETTINGS_AFFECTING_CSS):
370-
regenerate_css.apply_async(args=(self.request.event.pk,))
370+
transaction.on_commit(lambda: regenerate_css.apply(args=(self.request.event.pk,)))
371371
messages.success(
372372
self.request,
373373
_(

‎app/eventyay/presale/templates/pretixpresale/event/base.html‎

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,39 @@
4343
<div class="container page-header-links {% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %}page-header-links-outside{% endif %}">
4444
{% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %}
4545
<div class="pull-right header-part flip hidden-print header-content">
46-
<nav class="locales" aria-label="{% trans "select language" %}">
47-
{% if event.settings.locales|length > 1 %}
48-
{% for l in languages %}
49-
<a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}{% if request.META.QUERY_STRING %}%3F{{ request.META.QUERY_STRING|urlencode }}{% endif %}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow" lang="{{ l.code }}" hreflang="{{ l.code }}">
50-
{{ l.name_local }}</a>
51-
{% endfor %}
52-
{% endif %}
53-
</nav>
46+
{% if event.settings.locales|length > 1 %}
47+
<nav class="locales dropdown locale-switch" aria-label="{% trans "select language" %}">
48+
<a href="#"
49+
class="dropdown-toggle locale-switch-toggle"
50+
id="localeDropdownHeader"
51+
data-toggle="dropdown"
52+
role="button"
53+
aria-haspopup="true"
54+
aria-expanded="false">
55+
{% for l in languages %}
56+
{% if l.code|lower == request.LANGUAGE_CODE|lower %}
57+
{{ l.name_local }}
58+
{% endif %}
59+
{% endfor %}
60+
<span class="caret"></span>
61+
</a>
62+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="localeDropdownHeader" role="menu">
63+
{% for l in languages %}
64+
<li class="{% if l.code|lower == request.LANGUAGE_CODE|lower %}active{% endif %}" role="presentation">
65+
<a href="{% url 'presale:locale.set' %}?locale={{ l.code }}&next={{ request.path }}{% if request.META.QUERY_STRING %}%3F{{ request.META.QUERY_STRING|urlencode }}{% endif %}"
66+
class="dropdown-item"
67+
rel="nofollow"
68+
lang="{{ l.code }}"
69+
hreflang="{{ l.code }}"
70+
role="menuitem"
71+
tabindex="-1">
72+
{{ l.name_local }}
73+
</a>
74+
</li>
75+
{% endfor %}
76+
</ul>
77+
</nav>
78+
{% endif %}
5479
{% include "pretixpresale/fragment_login_status.html" %}
5580
</div>
5681
{% endif %}
@@ -68,17 +93,31 @@
6893
{% endblock %}
6994
{% block page %}
7095
<div class=" {% if event_logo and event.settings.logo_image_large %}logo-large{% endif %}">
71-
{% if event.settings.locales|length > 1 %}
72-
{% if event.settings.theme_color_background|upper == "#FFFFFF" and not event.settings.logo_image_large %}
73-
<div class="{% if not event_logo or not event.settings.logo_image_large %}pull-right flip{% endif %} loginbox hidden-print">
74-
<nav class="locales" aria-label="{% trans "select language" %}">
75-
{% for l in languages %}
76-
<a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}{% if request.META.QUERY_STRING %}%3F{{ request.META.QUERY_STRING|urlencode }}{% endif %}" class="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
77-
{{ l.name_local }}</a>
78-
{% endfor %}
79-
</nav>
80-
</div>
81-
{% endif %}
96+
{% if event.settings.locales|length > 1 and event.settings.theme_color_background|upper == "#FFFFFF" and not event.settings.logo_image_large %}
97+
<div class="{% if not event_logo or not event.settings.logo_image_large %}pull-right flip{% endif %} loginbox hidden-print">
98+
<nav class="locales dropdown" aria-label="{% trans "select language" %}">
99+
<a href="#"
100+
class="dropdown-toggle locale-switch-toggle"
101+
id="localeDropdownLoginbox"
102+
data-toggle="dropdown"
103+
role="button"
104+
aria-haspopup="true"
105+
aria-expanded="false">
106+
...
107+
</a>
108+
<ul class="dropdown-menu dropdown-menu-right locales-dropdown-menu" aria-labelledby="localeDropdownLoginbox" role="menu">
109+
{% for l in languages %}
110+
<li class="{% if l.code|lower == request.LANGUAGE_CODE|lower %}active{% endif %}" role="presentation">
111+
<a href="..."
112+
class="dropdown-item"
113+
...>
114+
{{ l.name_local }}
115+
</a>
116+
</li>
117+
{% endfor %}
118+
</ul>
119+
</nav>
120+
</div>
82121
{% endif %}
83122
<div class="clearfix"></div>
84123
</div>

‎app/eventyay/static/orga/js/colorpicker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const luminanace = (r, g, b) => {
8787
const contrast = (rgb1, rgb2) => {
8888
const l1 = luminanace(rgb1[0], rgb1[1], rgb1[2]) + 0.05
8989
const l2 = luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05
90-
const ratio = l1 / l2
90+
let ratio = l1 / l2
9191
if (l2 > l1) {
9292
ratio = 1 / ratio
9393
}

‎app/eventyay/static/pretixcontrol/js/ui/main.js‎

Lines changed: 86 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,82 @@ var form_handlers = function (el) {
208208
if (l2 > l1) {ratio = 1/ratio}
209209
return ratio.toFixed(1)
210210
}
211-
el.find(".colorpickerfield").colorpicker({
211+
212+
function getColorFieldHost($input) {
213+
var $formGroup = $input.closest('.form-group'),
214+
$host = $formGroup.find('.col-md-9, .col-sm-9, .col-lg-9, .col-xs-12').first();
215+
if ($host.length) {
216+
return $host;
217+
}
218+
return $formGroup.length ? $formGroup : $input.parent();
219+
}
220+
221+
function ensureColorPreview($input) {
222+
var $host = getColorFieldHost($input),
223+
$wrapper = $input.closest('.colorpicker-preview-group');
224+
if (!$wrapper.length) {
225+
$wrapper = $('<div class="colorpicker-preview-group"></div>');
226+
$input.before($wrapper);
227+
$wrapper.append($input);
228+
} else if ($wrapper.parent()[0] !== $host[0]) {
229+
$wrapper.appendTo($host);
230+
}
231+
var $preview = $wrapper.find('.colorpicker-preview');
232+
if (!$preview.length) {
233+
$preview = $('<span class="colorpicker-preview" aria-hidden="true"></span>');
234+
$wrapper.prepend($preview);
235+
}
236+
return {preview: $preview, host: $host};
237+
}
238+
239+
function updateColorPreview($input, color) {
240+
var parts = ensureColorPreview($input),
241+
$preview = parts.preview,
242+
value = color || $input.val();
243+
if (value) {
244+
$preview.removeClass('is-empty');
245+
$preview.css('background-color', value);
246+
} else {
247+
$preview.addClass('is-empty');
248+
$preview.css('background-color', '');
249+
}
250+
return parts.host;
251+
}
252+
253+
function updateContrastState($input, rgb) {
254+
var $host = getColorFieldHost($input),
255+
$note = $host.find(".contrast-state");
256+
if (!$input.val() || !rgb || $input.is(".no-contrast")) {
257+
$note.remove();
258+
return;
259+
}
260+
if (!$note.length) {
261+
$note = $("<div class='help-block contrast-state'></div>");
262+
$host.append($note);
263+
}
264+
var c = contrast([255,255,255], [rgb.r, rgb.g, rgb.b]);
265+
if (c > 7) {
266+
$note.html("<span class='fa fa-fw fa-check-circle'></span>")
267+
.append(gettext('Your color has great contrast and is very easy to read!'));
268+
$note.addClass("text-success").removeClass("text-warning").removeClass("text-danger");
269+
} else if (c > 2.5) {
270+
$note.html("<span class='fa fa-fw fa-info-circle'></span>")
271+
.append(gettext('Your color has decent contrast and is probably good-enough to read!'));
272+
$note.removeClass("text-success").removeClass("text-warning").removeClass("text-danger");
273+
} else {
274+
$note.html("<span class='fa fa-fw fa-warning'></span>")
275+
.append(gettext('Your color has bad contrast for text on white background, please choose a darker ' +
276+
'shade.'));
277+
$note.addClass("text-danger").removeClass("text-success").removeClass("text-warning");
278+
}
279+
}
280+
281+
var $colorInputs = el.find(".colorpickerfield");
282+
$colorInputs.each(function () {
283+
updateColorPreview($(this));
284+
});
285+
286+
$colorInputs.colorpicker({
212287
format: 'hex',
213288
align: 'left',
214289
customClass: 'colorpicker-2x',
@@ -225,32 +300,16 @@ var form_handlers = function (el) {
225300
}
226301
}
227302
}).on('changeColor create', function (e) {
228-
var rgb = $(this).colorpicker('color').toRGB();
229-
var c = contrast([255,255,255], [rgb.r, rgb.g, rgb.b]);
230-
var mark = 'times';
231-
if ($(this).parent().find(".contrast-state").length === 0) {
232-
$(this).parent().append("<div class='help-block contrast-state'></div>");
233-
}
234-
var $note = $(this).parent().find(".contrast-state");
235-
if ($(this).val() === "") {
236-
$note.remove();
237-
}
238-
if (!$(this).is(".no-contrast")) {
239-
if (c > 7) {
240-
$note.html("<span class='fa fa-fw fa-check-circle'></span>")
241-
.append(gettext('Your color has great contrast and is very easy to read!'));
242-
$note.addClass("text-success").removeClass("text-warning").removeClass("text-danger");
243-
} else if (c > 2.5) {
244-
$note.html("<span class='fa fa-fw fa-info-circle'></span>")
245-
.append(gettext('Your color has decent contrast and is probably good-enough to read!'));
246-
$note.removeClass("text-success").removeClass("text-warning").removeClass("text-danger");
247-
} else {
248-
$note.html("<span class='fa fa-fw fa-warning'></span>")
249-
.append(gettext('Your color has bad contrast for text on white background, please choose a darker ' +
250-
'shade.'));
251-
$note.addClass("text-danger").removeClass("text-success").removeClass("text-warning");
252-
}
253-
}
303+
var $input = $(this),
304+
pickerColor = e.color || ($input.colorpicker ? $input.colorpicker('color') : null),
305+
rgb = pickerColor && pickerColor.toRGB ? pickerColor.toRGB() : null,
306+
colorString = pickerColor && pickerColor.toString ? pickerColor.toString() : null;
307+
updateColorPreview($input, colorString);
308+
updateContrastState($input, rgb);
309+
});
310+
311+
$colorInputs.on('input', function () {
312+
updateColorPreview($(this));
254313
});
255314

256315
el.find("input[data-checkbox-dependency]").each(function () {

‎app/eventyay/static/pretixcontrol/scss/_forms.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,35 @@ div[data-formset-body], div[data-formset-form], div[data-nested-formset-form], d
149149
}
150150
}
151151

152+
.colorpicker-preview-group {
153+
display: flex;
154+
align-items: center;
155+
width: 100%;
156+
}
157+
158+
.colorpicker-preview {
159+
display: inline-block;
160+
width: $input-height-base;
161+
height: $input-height-base;
162+
border: 1px solid #d4d4d5;
163+
border-right: 0;
164+
border-radius: $input-border-radius 0 0 $input-border-radius;
165+
background-color: #ffffff;
166+
box-sizing: border-box;
167+
flex-shrink: 0;
168+
}
169+
170+
.colorpicker-preview.is-empty {
171+
background-image: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 8px, #ffffff 8px, #ffffff 16px);
172+
}
173+
174+
.colorpicker-preview-group .form-control.colorpickerfield {
175+
flex: 1 1 auto;
176+
width: auto;
177+
border-radius: 0 $input-border-radius $input-border-radius 0;
178+
border-left: 0;
179+
}
180+
152181
@media (min-width: $screen-sm-min) {
153182
.variation-matrix > tbody > tr > td {
154183
line-height: 34px;

‎app/eventyay/static/pretixcontrol/scss/_rtl.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,19 @@ html.rtl {
9090
padding-left: 0;
9191
padding-right: 20px;
9292
}
93+
.colorpicker-preview-group {
94+
flex-direction: row-reverse;
95+
}
96+
.colorpicker-preview {
97+
border-radius: 0 $input-border-radius $input-border-radius 0;
98+
border-left: 0;
99+
border-right: 1px solid #d4d4d5;
100+
}
101+
.colorpicker-preview-group .form-control.colorpickerfield {
102+
border-radius: $input-border-radius 0 0 $input-border-radius;
103+
border-left: 1px solid #d4d4d5;
104+
border-right: 0;
105+
}
93106
}
94107
@media (min-width: $screen-sm-min) {
95108
html.rtl #page-wrapper {
@@ -112,4 +125,3 @@ html.rtl {
112125
}
113126
}
114127
}
115-

‎app/eventyay/static/pretixpresale/scss/_theme.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,40 @@ h2.content-header {
107107
.header-content {
108108
display: flex;
109109
}
110+
111+
.locale-switch {
112+
.locale-switch-toggle {
113+
color: choose-contrast-color($body-bg, white, $link-color);
114+
font-weight: 600;
115+
padding: 0 4px;
116+
117+
&:hover,
118+
&:focus {
119+
text-decoration: none;
120+
color: choose-contrast-color($body-bg, white, $link-color);
121+
}
122+
}
123+
124+
.dropdown-menu {
125+
min-width: 160px;
126+
background: white;
127+
border: 1px solid $gray-lighter;
128+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
129+
}
130+
131+
.dropdown-item {
132+
color: $text-color;
133+
134+
&:hover {
135+
background: lighten($gray-lighter, 6%);
136+
color: $text-color;
137+
text-decoration: none;
138+
}
139+
140+
&.active {
141+
font-weight: 700;
142+
background: lighten($brand-primary, 42%);
143+
color: $text-color;
144+
}
145+
}
146+
}

‎app/eventyay/static/pretixpresale/scss/custom.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@
107107

108108
.page-header-links{
109109
.header-part{
110-
a {
110+
// Keep top-level header links white without affecting dropdown items
111+
> a,
112+
> .locales > a {
111113
color: #FFFFFF !important;
112114
}
113115
}

0 commit comments

Comments
 (0)