mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-17 16:45:22 +00:00
Merge pull request #1124 from ae-utbm/tabs
Add tab widget and remove jquery-ui
This commit is contained in:
Bartuccio Antoine
GitHub
commit
d1f11216c7
@ -18,7 +18,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_js %}
|
||||
<script type="module" src={{ static("bundled/com/components/moderation-alert-index.ts") }}></script>
|
||||
<script type="module" src={{ static("bundled/com/moderation-alert-index.ts") }}></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
|
||||
{% block additional_js %}
|
||||
<script type="module" src={{ static("bundled/com/components/ics-calendar-index.ts") }}></script>
|
||||
<script type="module" src={{ static("bundled/com/components/moderation-alert-index.ts") }}></script>
|
||||
<script type="module" src={{ static("bundled/com/components/upcoming-news-loader-index.ts") }}></script>
|
||||
<script type="module" src={{ static("bundled/com/moderation-alert-index.ts") }}></script>
|
||||
<script type="module" src={{ static("bundled/com/upcoming-news-loader-index.ts") }}></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
120
core/static/bundled/core/components/tabs-index.ts
Normal file
120
core/static/bundled/core/components/tabs-index.ts
Normal file
@ -0,0 +1,120 @@
|
||||
import { registerComponent } from "#core:utils/web-components";
|
||||
import { html, render } from "lit-html";
|
||||
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
|
||||
|
||||
@registerComponent("ui-tab")
|
||||
export class Tab extends HTMLElement {
|
||||
static observedAttributes = ["title", "active"];
|
||||
private description = "";
|
||||
private inner = "";
|
||||
private active = false;
|
||||
|
||||
attributeChangedCallback(name: string, _oldValue?: string, newValue?: string) {
|
||||
const activeOld = this.active;
|
||||
this.active = this.hasAttribute("active");
|
||||
if (this.active !== activeOld && this.active) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("ui-tab-activated", { detail: this, bubbles: true }),
|
||||
);
|
||||
}
|
||||
|
||||
if (name === "title") {
|
||||
this.description = newValue;
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent("ui-tab-updated", { bubbles: true }));
|
||||
}
|
||||
|
||||
getButtonTemplate() {
|
||||
return html`
|
||||
<button
|
||||
role="tab"
|
||||
?aria-selected=${this.active}
|
||||
class="tab-header clickable ${this.active ? "active" : ""}"
|
||||
@click="${() => this.setActive(true)}"
|
||||
>
|
||||
${this.description}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
getContentTemplate() {
|
||||
return html`
|
||||
<section
|
||||
class="tab-section"
|
||||
?hidden=${!this.active}
|
||||
>
|
||||
${unsafeHTML(this.getContentHtml())}
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
setActive(value: boolean) {
|
||||
if (value) {
|
||||
this.setAttribute("active", "");
|
||||
} else {
|
||||
this.removeAttribute("active");
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.inner = this.innerHTML;
|
||||
this.innerHTML = "";
|
||||
}
|
||||
|
||||
getContentHtml() {
|
||||
const content = this.getElementsByClassName("tab-section")[0];
|
||||
if (content !== undefined) {
|
||||
return content.innerHTML;
|
||||
}
|
||||
return this.inner;
|
||||
}
|
||||
|
||||
setContentHtml(value: string) {
|
||||
const content = this.getElementsByClassName("tab-section")[0];
|
||||
if (content !== undefined) {
|
||||
content.innerHTML = value;
|
||||
}
|
||||
this.inner = value;
|
||||
}
|
||||
}
|
||||
|
||||
@registerComponent("ui-tab-group")
|
||||
export class TabGroup extends HTMLElement {
|
||||
private node: HTMLDivElement;
|
||||
|
||||
connectedCallback() {
|
||||
this.node = document.createElement("div");
|
||||
this.node.classList.add("tabs", "shadow");
|
||||
this.appendChild(this.node);
|
||||
|
||||
this.addEventListener("ui-tab-activated", (event: CustomEvent) => {
|
||||
const target = event.detail as Tab;
|
||||
for (const tab of this.getElementsByTagName("ui-tab") as HTMLCollectionOf<Tab>) {
|
||||
if (tab !== target) {
|
||||
tab.setActive(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.addEventListener("ui-tab-updated", () => {
|
||||
this.render();
|
||||
});
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const tabs = Array.prototype.slice.call(
|
||||
this.getElementsByTagName("ui-tab"),
|
||||
) as Tab[];
|
||||
render(
|
||||
html`
|
||||
<div class="tab-headers">
|
||||
${tabs.map((tab) => tab.getButtonTemplate())}
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
${tabs.map((tab) => tab.getContentTemplate())}
|
||||
</div>
|
||||
`,
|
||||
this.node,
|
||||
);
|
||||
}
|
||||
}
|
||||
2
core/static/bundled/jquery-ui-index.js
vendored
2
core/static/bundled/jquery-ui-index.js
vendored
@ -1,2 +0,0 @@
|
||||
// This is only used to import jquery-ui css files
|
||||
import "jquery-ui/themes/base/all.css";
|
||||
53
core/static/core/components/tabs.scss
Normal file
53
core/static/core/components/tabs.scss
Normal file
@ -0,0 +1,53 @@
|
||||
@import "core/static/core/colors";
|
||||
|
||||
ui-tab-group {
|
||||
*[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-radius: 5px;
|
||||
|
||||
.tab-headers {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
background-color: $primary-neutral-light-color;
|
||||
padding: 3px 12px 12px;
|
||||
column-gap: 20px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
.tab-header {
|
||||
border: none;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
font-size: 120%;
|
||||
background-color: unset;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
border-bottom-color: darken($primary-neutral-light-color, 20%);
|
||||
}
|
||||
|
||||
&.active:after {
|
||||
border-bottom-color: $primary-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,42 +1,4 @@
|
||||
$(() => {
|
||||
// const buttons = $('.choose_file_button')
|
||||
const popups = $(".choose_file_widget");
|
||||
popups.dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
width: "90%",
|
||||
create: (event) => {
|
||||
const target = $(event.target);
|
||||
target.parent().css({
|
||||
position: "fixed",
|
||||
top: "5%",
|
||||
bottom: "5%",
|
||||
});
|
||||
target.css("height", "300px");
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
text: "Choose",
|
||||
click: function () {
|
||||
$(`input[name=${$(this).attr("name")}]`).attr(
|
||||
"value",
|
||||
$("#file_id").attr("value"),
|
||||
);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
$(".choose_file_button")
|
||||
.button()
|
||||
.on("click", function () {
|
||||
const popup = popups.filter(`[name=${$(this).attr("name")}]`);
|
||||
popup.html(
|
||||
'<iframe src="/file/popup" width="100%" height="95%"></iframe><div id="file_id" value="null" />',
|
||||
);
|
||||
popup.dialog({ title: $(this).text() }).dialog("open");
|
||||
});
|
||||
$("#quick_notif li").click(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
@ -111,12 +111,6 @@ body {
|
||||
|
||||
/*--------------------------------HEADER-------------------------------*/
|
||||
|
||||
#popupheader {
|
||||
width: 88%;
|
||||
margin: 0 auto;
|
||||
padding: 0.3em 1%;
|
||||
}
|
||||
|
||||
#info_boxes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -352,52 +346,6 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-radius: 5px;
|
||||
|
||||
.tab-headers {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
background-color: $primary-neutral-light-color;
|
||||
padding: 3px 12px 12px;
|
||||
column-gap: 20px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
.tab-header {
|
||||
border: none;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
font-size: 120%;
|
||||
background-color: unset;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
border-bottom-color: darken($primary-neutral-light-color, 20%);
|
||||
}
|
||||
|
||||
&.active:after {
|
||||
border-bottom-color: $primary-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool_bar {
|
||||
overflow: auto;
|
||||
padding: 4px;
|
||||
@ -848,25 +796,6 @@ footer {
|
||||
}
|
||||
|
||||
/*--------------------------------JQuery-------------------------------*/
|
||||
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active,
|
||||
a.ui-button:active,
|
||||
.ui-button:active,
|
||||
.ui-button.ui-state-active:hover {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-right,
|
||||
.ui-corner-top,
|
||||
.ui-corner-left {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#club_detail {
|
||||
.club_logo {
|
||||
float: right;
|
||||
|
||||
@ -14,10 +14,6 @@
|
||||
<link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
|
||||
<link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
|
||||
|
||||
{% block jquery_css %}
|
||||
{# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
|
||||
<link rel="stylesheet" href="{{ static('bundled/jquery-ui-index.css') }}">
|
||||
{% endblock %}
|
||||
<link rel="preload" as="style" href="{{ static('bundled/fontawesome-index.css') }}" onload="this.onload=null;this.rel='stylesheet'">
|
||||
<noscript><link rel="stylesheet" href="{{ static('bundled/fontawesome-index.css') }}"></noscript>
|
||||
|
||||
@ -30,11 +26,8 @@
|
||||
|
||||
<!-- Jquery declared here to be accessible in every django widgets -->
|
||||
<script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
|
||||
<script src="{{ static('bundled/vendored/jquery-ui.min.js') }}"></script>
|
||||
<script src="{{ static('core/js/script.js') }}"></script>
|
||||
|
||||
|
||||
|
||||
{% block additional_css %}{% endblock %}
|
||||
{% block additional_js %}{% endblock %}
|
||||
{% endblock %}
|
||||
@ -47,35 +40,28 @@
|
||||
{% csrf_token %}
|
||||
|
||||
{% block header %}
|
||||
{% if not popup %}
|
||||
{% include "core/base/header.jinja" %}
|
||||
{% include "core/base/header.jinja" %}
|
||||
|
||||
{% block info_boxes %}
|
||||
<div id="info_boxes">
|
||||
{% set sith = get_sith() %}
|
||||
{% if sith.alert_msg %}
|
||||
<div id="alert_box">
|
||||
{{ sith.alert_msg|markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if sith.info_msg %}
|
||||
<div id="info_box">
|
||||
{{ sith.info_msg|markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% else %}
|
||||
<div id="popupheader">{{ user.get_display_name() }}</div>
|
||||
{% endif %}
|
||||
{% block info_boxes %}
|
||||
<div id="info_boxes">
|
||||
{% set sith = get_sith() %}
|
||||
{% if sith.alert_msg %}
|
||||
<div id="alert_box">
|
||||
{{ sith.alert_msg|markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if sith.info_msg %}
|
||||
<div id="info_box">
|
||||
{{ sith.info_msg|markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
{% if not popup %}
|
||||
{% include "core/base/navbar.jinja" %}
|
||||
{% endif %}
|
||||
{% include "core/base/navbar.jinja" %}
|
||||
{% endblock %}
|
||||
|
||||
<div id="page">
|
||||
@ -102,24 +88,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not popup %}
|
||||
<footer>
|
||||
{% block footer %}
|
||||
<div>
|
||||
<a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'legals') }}">{% trans %}Legal notices{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'copyright_agent') }}">{% trans %}Intellectual property{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'docs') }}">{% trans %}Help & Documentation{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'rd') }}">{% trans %}R&D{% endtrans %}</a>
|
||||
</div>
|
||||
<a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#">
|
||||
<i class="fa-brands fa-github"></i>
|
||||
{% trans %}Site created by the IT Department of the AE{% endtrans %}
|
||||
</a>
|
||||
{% endblock %}
|
||||
<br>
|
||||
</footer>
|
||||
{% endif %}
|
||||
<footer>
|
||||
{% block footer %}
|
||||
<div>
|
||||
<a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'legals') }}">{% trans %}Legal notices{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'copyright_agent') }}">{% trans %}Intellectual property{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'docs') }}">{% trans %}Help & Documentation{% endtrans %}</a>
|
||||
<a href="{{ url('core:page', 'rd') }}">{% trans %}R&D{% endtrans %}</a>
|
||||
</div>
|
||||
<a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#">
|
||||
<i class="fa-brands fa-github"></i>
|
||||
{% trans %}Site created by the IT Department of the AE{% endtrans %}
|
||||
</a>
|
||||
{% endblock %}
|
||||
<br>
|
||||
</footer>
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
{% macro print_file_name(file) %}
|
||||
{% if file %}
|
||||
{{ print_file_name(file.parent) }} >
|
||||
<a href="{{ url('core:file_detail', file_id=file.id, popup=popup) }}">{{ file.get_display_name() }}</a>
|
||||
<a href="{{ url('core:file_detail', file_id=file.id) }}">{{ file.get_display_name() }}</a>
|
||||
{% else %}
|
||||
<a href="{{ url('core:file_list', popup) }}">{% trans %}Files{% endtrans %}</a>
|
||||
<a href="{{ url('core:file_list') }}">{% trans %}Files{% endtrans %}</a>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
@ -33,16 +33,16 @@
|
||||
<div>
|
||||
{% set home = user.home %}
|
||||
{% if home %}
|
||||
<a href="{{ url('core:file_detail', home.id, popup) }}">{% trans %}My files{% endtrans %}</a>
|
||||
<a href="{{ url('core:file_detail', home.id) }}">{% trans %}My files{% endtrans %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if file %}
|
||||
<a href="{{ url('core:file_detail', file.id, popup) }}">{% trans %}View{% endtrans %}</a>
|
||||
<a href="{{ url('core:file_detail', file.id) }}">{% trans %}View{% endtrans %}</a>
|
||||
{% if can_edit(file, user) %}
|
||||
<a href="{{ url('core:file_edit', file_id=file.id, popup=popup) }}">{% trans %}Edit{% endtrans %}</a>
|
||||
<a href="{{ url('core:file_edit', file_id=file.id) }}">{% trans %}Edit{% endtrans %}</a>
|
||||
{% endif %}
|
||||
{% if can_edit_prop(file, user) %}
|
||||
<a href="{{ url('core:file_prop', file_id=file.id, popup=popup) }}">{% trans %}Prop{% endtrans %}</a>
|
||||
<a href="{{ url('core:file_prop', file_id=file.id) }}">{% trans %}Prop{% endtrans %}</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
{% else %}
|
||||
<i class="fa fa-file" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
<a href="{{ url('core:file_detail', file_id=f.id, popup=popup) }}">{{ f.get_display_name() }}</a></li>
|
||||
<a href="{{ url('core:file_detail', file_id=f.id) }}">{{ f.get_display_name() }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</form>
|
||||
@ -59,22 +59,9 @@
|
||||
<p><a href="{{ url('core:download', file_id=file.id) }}">{% trans %}Download{% endtrans %}</a></p>
|
||||
{% endif %}
|
||||
{% if not file.home_of and not file.home_of_club and file.parent %}
|
||||
<p><a href="{{ url('core:file_delete', file_id=file.id, popup=popup) }}">{% trans %}Delete{% endtrans %}</a></p>
|
||||
<p><a href="{{ url('core:file_delete', file_id=file.id) }}">{% trans %}Delete{% endtrans %}</a></p>
|
||||
{% endif %}
|
||||
{% if user.is_com_admin %}
|
||||
<p><a href="{{ url('core:file_moderate', file_id=file.id) }}">{% trans %}Moderate{% endtrans %}</a></p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
{% if popup and file.is_file %}
|
||||
parent.$("#file_id").replaceWith('<div id="file_id" value="{{ file.id }}">{{ file.name }}</div>');
|
||||
parent.$(".ui-dialog-buttonpane button").button("option", "disabled", false);
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
{% else %}
|
||||
<i class="fa fa-file" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
<a href="{{ url('core:file_detail', file_id=f.id, popup=popup) }}">{{ f.name }}</a></li>
|
||||
<a href="{{ url('core:file_detail', file_id=f.id) }}">{{ f.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
|
||||
@ -245,65 +245,3 @@
|
||||
<button type="button" onclick="checkbox_{{form_id}}(true);">{% trans %}Select All{% endtrans %}</button>
|
||||
<button type="button" onclick="checkbox_{{form_id}}(false);">{% trans %}Unselect All{% endtrans %}</button>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro tabs(tab_list, attrs = "") %}
|
||||
{# Tab component
|
||||
|
||||
Parameters:
|
||||
tab_list: list[tuple[str, str]] The list of tabs to display.
|
||||
Each element of the list is a tuple which first element
|
||||
is the title of the tab and the second element its content
|
||||
attrs: str Additional attributes to put on the enclosing div
|
||||
|
||||
Example:
|
||||
A basic usage would be as follow :
|
||||
|
||||
{{ tabs([("title 1", "content 1"), ("title 2", "content 2")]) }}
|
||||
|
||||
If you want to display more complex logic, you can define macros
|
||||
and use those macros in parameters :
|
||||
|
||||
{{ tabs([("title", my_macro())]) }}
|
||||
|
||||
It's also possible to get and set the currently selected tab using Alpine.
|
||||
Here, the title of the currently selected tab will be displayed.
|
||||
Moreover, on page load, the tab will be opened on "tab 2".
|
||||
|
||||
<div x-data="{current_tab: 'tab 2'}">
|
||||
<p x-text="current_tab"></p>
|
||||
{{ tabs([("tab 1", "Hello"), ("tab 2", "World")], "x-model=current_tab") }}
|
||||
</div>
|
||||
|
||||
If you want to have translated tab titles, you can enclose the macro call
|
||||
in a with block :
|
||||
|
||||
{% with title=_("title"), content=_("Content") %}
|
||||
{{ tabs([(tab1, content)]) }}
|
||||
{% endwith %}
|
||||
#}
|
||||
<div
|
||||
class="tabs shadow"
|
||||
x-data="{selected: '{{ tab_list[0][0] }}'}"
|
||||
x-modelable="selected"
|
||||
{{ attrs }}
|
||||
>
|
||||
<div class="tab-headers">
|
||||
{% for title, _ in tab_list %}
|
||||
<button
|
||||
class="tab-header clickable"
|
||||
:class="{active: selected === '{{ title }}'}"
|
||||
@click="selected = '{{ title }}'"
|
||||
>
|
||||
{{ title }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
{% for title, content in tab_list %}
|
||||
<section x-show="selected === '{{ title }}'">
|
||||
{{ content }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
{%- if this_picture -%}
|
||||
{% set default_picture = this_picture.get_download_url()|tojson %}
|
||||
{% set delete_url = (
|
||||
url('core:file_delete', file_id=this_picture.id, popup='')
|
||||
url('core:file_delete', file_id=this_picture.id)
|
||||
+ "?next=" + url('core:user_edit', user_id=profile.id)
|
||||
)|tojson %}
|
||||
{%- else -%}
|
||||
|
||||
@ -146,7 +146,7 @@ class TestUserProfilePicture:
|
||||
return client.post(
|
||||
reverse(
|
||||
"core:file_delete",
|
||||
kwargs={"file_id": user.profile_pict.pk, "popup": ""},
|
||||
kwargs={"file_id": user.profile_pict.pk},
|
||||
query={"next": user.get_absolute_url()},
|
||||
),
|
||||
)
|
||||
|
||||
10
core/urls.py
10
core/urls.py
@ -193,24 +193,24 @@ urlpatterns = [
|
||||
name="user_gift_delete",
|
||||
),
|
||||
# File views
|
||||
re_path(r"^file/(?P<popup>popup)?$", FileListView.as_view(), name="file_list"),
|
||||
re_path(r"^file/$", FileListView.as_view(), name="file_list"),
|
||||
re_path(
|
||||
r"^file/(?P<file_id>[0-9]+)/(?P<popup>popup)?$",
|
||||
r"^file/(?P<file_id>[0-9]+)/$",
|
||||
FileView.as_view(),
|
||||
name="file_detail",
|
||||
),
|
||||
re_path(
|
||||
r"^file/(?P<file_id>[0-9]+)/edit/(?P<popup>popup)?$",
|
||||
r"^file/(?P<file_id>[0-9]+)/edit/$",
|
||||
FileEditView.as_view(),
|
||||
name="file_edit",
|
||||
),
|
||||
re_path(
|
||||
r"^file/(?P<file_id>[0-9]+)/prop/(?P<popup>popup)?$",
|
||||
r"^file/(?P<file_id>[0-9]+)/prop/$",
|
||||
FileEditPropView.as_view(),
|
||||
name="file_prop",
|
||||
),
|
||||
re_path(
|
||||
r"^file/(?P<file_id>[0-9]+)/delete/(?P<popup>popup)?$",
|
||||
r"^file/(?P<file_id>[0-9]+)/delete/$",
|
||||
FileDeleteView.as_view(),
|
||||
name="file_delete",
|
||||
),
|
||||
|
||||
@ -37,8 +37,6 @@ from core.views.forms import LoginForm
|
||||
|
||||
def forbidden(request, exception):
|
||||
context = {"next": request.path, "form": LoginForm()}
|
||||
if popup := request.resolver_match.kwargs.get("popup"):
|
||||
context["popup"] = popup
|
||||
return HttpResponseForbidden(render(request, "core/403.jinja", context=context))
|
||||
|
||||
|
||||
|
||||
@ -198,9 +198,6 @@ class FileListView(ListView):
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
kwargs = super().get_context_data(**kwargs)
|
||||
kwargs["popup"] = ""
|
||||
if self.kwargs.get("popup") is not None:
|
||||
kwargs["popup"] = "popup"
|
||||
return kwargs
|
||||
|
||||
|
||||
@ -217,20 +214,7 @@ class FileEditView(CanEditMixin, UpdateView):
|
||||
return modelform_factory(SithFile, fields=fields)
|
||||
|
||||
def get_success_url(self):
|
||||
if self.kwargs.get("popup") is not None:
|
||||
return reverse(
|
||||
"core:file_detail", kwargs={"file_id": self.object.id, "popup": "popup"}
|
||||
)
|
||||
return reverse(
|
||||
"core:file_detail", kwargs={"file_id": self.object.id, "popup": ""}
|
||||
)
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
kwargs = super().get_context_data(**kwargs)
|
||||
kwargs["popup"] = ""
|
||||
if self.kwargs.get("popup") is not None:
|
||||
kwargs["popup"] = "popup"
|
||||
return kwargs
|
||||
return reverse("core:file_detail", kwargs={"file_id": self.object.id})
|
||||
|
||||
|
||||
class FileEditPropForm(forms.ModelForm):
|
||||
@ -268,16 +252,9 @@ class FileEditPropView(CanEditPropMixin, UpdateView):
|
||||
def get_success_url(self):
|
||||
return reverse(
|
||||
"core:file_detail",
|
||||
kwargs={"file_id": self.object.id, "popup": self.kwargs.get("popup", "")},
|
||||
kwargs={"file_id": self.object.id},
|
||||
)
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
kwargs = super().get_context_data(**kwargs)
|
||||
kwargs["popup"] = ""
|
||||
if self.kwargs.get("popup") is not None:
|
||||
kwargs["popup"] = "popup"
|
||||
return kwargs
|
||||
|
||||
|
||||
class FileView(CanViewMixin, DetailView, FormMixin):
|
||||
"""Handle the upload of new files into a folder."""
|
||||
@ -353,15 +330,12 @@ class FileView(CanViewMixin, DetailView, FormMixin):
|
||||
def get_success_url(self):
|
||||
return reverse(
|
||||
"core:file_detail",
|
||||
kwargs={"file_id": self.object.id, "popup": self.kwargs.get("popup", "")},
|
||||
kwargs={"file_id": self.object.id},
|
||||
)
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
kwargs = super().get_context_data(**kwargs)
|
||||
kwargs["popup"] = ""
|
||||
kwargs["form"] = self.form
|
||||
if self.kwargs.get("popup") is not None:
|
||||
kwargs["popup"] = "popup"
|
||||
kwargs["clipboard"] = SithFile.objects.filter(
|
||||
id__in=self.request.session["clipboard"]
|
||||
)
|
||||
@ -380,19 +354,17 @@ class FileDeleteView(AllowFragment, CanEditPropMixin, DeleteView):
|
||||
return self.request.GET["next"]
|
||||
if self.object.parent is None:
|
||||
return reverse(
|
||||
"core:file_list", kwargs={"popup": self.kwargs.get("popup", "")}
|
||||
"core:file_list",
|
||||
)
|
||||
return reverse(
|
||||
"core:file_detail",
|
||||
kwargs={
|
||||
"file_id": self.object.parent.id,
|
||||
"popup": self.kwargs.get("popup", ""),
|
||||
},
|
||||
)
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
kwargs = super().get_context_data(**kwargs)
|
||||
kwargs["popup"] = "" if self.kwargs.get("popup") is None else "popup"
|
||||
kwargs["next"] = self.request.GET.get("next", None)
|
||||
kwargs["previous"] = self.request.GET.get("previous", None)
|
||||
kwargs["current"] = self.request.path
|
||||
|
||||
@ -86,30 +86,6 @@ class NFCTextInput(TextInput):
|
||||
return context
|
||||
|
||||
|
||||
class SelectFile(TextInput):
|
||||
def render(self, name, value, attrs=None, renderer=None):
|
||||
if attrs:
|
||||
attrs["class"] = "select_file"
|
||||
else:
|
||||
attrs = {"class": "select_file"}
|
||||
output = (
|
||||
'%(content)s<div name="%(name)s" class="choose_file_widget" title="%(title)s"></div>'
|
||||
% {
|
||||
"content": super().render(name, value, attrs, renderer),
|
||||
"title": _("Choose file"),
|
||||
"name": name,
|
||||
}
|
||||
)
|
||||
output += (
|
||||
'<span name="'
|
||||
+ name
|
||||
+ '" class="choose_file_button">'
|
||||
+ gettext("Choose file")
|
||||
+ "</span>"
|
||||
)
|
||||
return output
|
||||
|
||||
|
||||
class SelectUser(TextInput):
|
||||
def render(self, name, value, attrs=None, renderer=None):
|
||||
if attrs:
|
||||
|
||||
@ -137,8 +137,3 @@ document.addEventListener("alpine:init", () => {
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
$(() => {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
|
||||
($("#products") as any).tabs();
|
||||
});
|
||||
|
||||
@ -9,12 +9,14 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('counter/css/counter-click.scss') }}" defer></link>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('core/components/tabs.scss') }}" defer></link>
|
||||
<link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_js %}
|
||||
<script type="module" src="{{ static('bundled/counter/counter-click-index.ts') }}"></script>
|
||||
<script type="module" src="{{ static('bundled/counter/components/counter-product-select-index.ts') }}"></script>
|
||||
<script type="module" src="{{ static('bundled/core/components/tabs-index.ts') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block info_boxes %}
|
||||
@ -205,35 +207,32 @@
|
||||
{% trans %}No products available on this counter for this user{% endtrans %}
|
||||
</div>
|
||||
{% else %}
|
||||
<ul>
|
||||
<ui-tab-group>
|
||||
{% for category in categories.keys() -%}
|
||||
<li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{% for category in categories.keys() -%}
|
||||
<div id="cat_{{ category|slugify }}">
|
||||
<h5 class="margin-bottom">{{ category }}</h5>
|
||||
<div class="row gap-2x">
|
||||
{% for product in categories[category] -%}
|
||||
<button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="image de {{ product.name }}"
|
||||
{% if product.icon %}
|
||||
src="{{ product.icon.url }}"
|
||||
{% else %}
|
||||
src="{{ static('core/img/na.gif') }}"
|
||||
{% endif %}
|
||||
/>
|
||||
<span class="card-content">
|
||||
<strong class="card-title">{{ product.name }}</strong>
|
||||
<p>{{ product.price }} €<br>{{ product.code }}</p>
|
||||
</span>
|
||||
</button>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor %}
|
||||
<ui-tab title="{{ category }}" {% if loop.index == 1 -%}active{%- endif -%}>
|
||||
<h5 class="margin-bottom">{{ category }}</h5>
|
||||
<div class="row gap-2x">
|
||||
{% for product in categories[category] -%}
|
||||
<button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="image de {{ product.name }}"
|
||||
{% if product.icon %}
|
||||
src="{{ product.icon.url }}"
|
||||
{% else %}
|
||||
src="{{ static('core/img/na.gif') }}"
|
||||
{% endif %}
|
||||
/>
|
||||
<span class="card-content">
|
||||
<strong class="card-title">{{ product.name }}</strong>
|
||||
<p>{{ product.price }} €<br>{{ product.code }}</p>
|
||||
</span>
|
||||
</button>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
</ui-tab>
|
||||
{% endfor %}
|
||||
</ui-tab-group>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,10 +5,6 @@
|
||||
{% trans counter_name=counter %}{{ counter_name }} stats{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block jquery_css %}
|
||||
{# Remove jquery_css #}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h3>{% trans counter_name=counter %}{{ counter_name }} stats{% endtrans %}</h3>
|
||||
<h4>
|
||||
|
||||
@ -4,10 +4,6 @@
|
||||
{% trans %}Basket state{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block jquery_css %}
|
||||
{# Remove jquery css #}
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_js %}
|
||||
<script type="module" src="{{ static('bundled/eboutic/checkout-index.ts') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@ -4,10 +4,6 @@
|
||||
{% trans %}Eboutic{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block jquery_css %}
|
||||
{# Remove jquery css #}
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_js %}
|
||||
{# This script contains the code to perform requests to manipulate the
|
||||
user basket without having to reload the page #}
|
||||
|
||||
@ -45,7 +45,7 @@ msgstr "Comment utiliser le lien du calendrier"
|
||||
msgid "Link copied"
|
||||
msgstr "Lien copié"
|
||||
|
||||
#: com/static/bundled/com/components/moderation-alert-index.ts
|
||||
#: com/static/bundled/com/moderation-alert-index.ts
|
||||
#, javascript-format
|
||||
msgid ""
|
||||
"This event will take place every week for %s weeks. If you publish or delete "
|
||||
|
||||
16
package-lock.json
generated
16
package-lock.json
generated
@ -32,7 +32,6 @@
|
||||
"glob": "^11.0.0",
|
||||
"htmx.org": "^2.0.3",
|
||||
"jquery": "^3.7.1",
|
||||
"jquery-ui": "^1.14.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lit-html": "^3.3.0",
|
||||
"native-file-system-adapter": "^3.0.1",
|
||||
@ -3090,9 +3089,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
||||
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
|
||||
"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"balanced-match": "^1.0.0"
|
||||
@ -4356,15 +4355,6 @@
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jquery-ui": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.14.1.tgz",
|
||||
"integrity": "sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.12.0 <5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/js-cookie": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||
|
||||
@ -59,7 +59,6 @@
|
||||
"glob": "^11.0.0",
|
||||
"htmx.org": "^2.0.3",
|
||||
"jquery": "^3.7.1",
|
||||
"jquery-ui": "^1.14.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lit-html": "^3.3.0",
|
||||
"native-file-system-adapter": "^3.0.1",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
So we give them here.
|
||||
If the aforementioned bug is resolved, you can remove this. #}
|
||||
{% block additional_js %}
|
||||
<script type="module" src="{{ static('bundled/core/components/tabs-index.ts') }}"></script>
|
||||
<script type="module" src="{{ static("bundled/core/components/ajax-select-index.ts") }}"></script>
|
||||
<script
|
||||
type="module"
|
||||
@ -19,6 +20,7 @@
|
||||
></script>
|
||||
{% endblock %}
|
||||
{% block additional_css %}
|
||||
<link rel="stylesheet" href="{{ static("core/components/tabs.scss") }}">
|
||||
<link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
|
||||
<link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
|
||||
<link rel="stylesheet" href="{{ static("subscription/css/subscription.scss") }}">
|
||||
@ -34,12 +36,12 @@
|
||||
|
||||
{% block content %}
|
||||
<h3>{% trans %}New subscription{% endtrans %}</h3>
|
||||
<div id="subscription-form">
|
||||
{% with title1=_("Existing member"), title2=_("New member") %}
|
||||
{{ tabs([
|
||||
(title1, form_fragment(existing_user_form, existing_user_post_url)),
|
||||
(title2, form_fragment(new_user_form, new_user_post_url)),
|
||||
]) }}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<ui-tab-group id="subscription-form">
|
||||
<ui-tab title="{% trans %}Existing member{% endtrans %}" active>
|
||||
{{ form_fragment(existing_user_form, existing_user_post_url) }}
|
||||
</ui-tab>
|
||||
<ui-tab title="{% trans %}New member{% endtrans %}">
|
||||
{{ form_fragment(new_user_form, new_user_post_url) }}
|
||||
</ui-tab>
|
||||
</ui-tab-group>
|
||||
{% endblock %}
|
||||
|
||||
@ -93,10 +93,6 @@ export default defineConfig((config: UserConfig) => {
|
||||
src: resolve(nodeModules, "jquery/dist/jquery.min.js"),
|
||||
dest: vendored,
|
||||
},
|
||||
{
|
||||
src: resolve(nodeModules, "jquery-ui/dist/jquery-ui.min.js"),
|
||||
dest: vendored,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user