From cad6464317432b493531934b5127ef96182c8720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <p.mueller@pcsg.de>
Date: Mon, 17 Jul 2017 15:49:36 +0200
Subject: [PATCH] refactor: UserProfile responsive design; Show Membership
content in UserProfile
---
.../profile/UserProfile.Membership.html | 35 +++
.../profile/UserProfile.MembershipStatus.html | 17 --
bin/controls/profile/UserProfile.css | 23 +-
bin/controls/profile/UserProfile.html | 10 +-
bin/controls/profile/UserProfile.js | 215 ++++++++++--------
locale.xml | 10 +-
settings.xml | 2 +-
7 files changed, 191 insertions(+), 121 deletions(-)
create mode 100644 bin/controls/profile/UserProfile.Membership.html
delete mode 100644 bin/controls/profile/UserProfile.MembershipStatus.html
diff --git a/bin/controls/profile/UserProfile.Membership.html b/bin/controls/profile/UserProfile.Membership.html
new file mode 100644
index 0000000..dceeaff
--- /dev/null
+++ b/bin/controls/profile/UserProfile.Membership.html
@@ -0,0 +1,35 @@
+<div class="quiqqer-memberships-profile-userprofile-membership-info grid-60">
+ <h2 class="quiqqer-memberships-profile-userprofile-membership-info-title">
+ {{membershipTitle}}
+ </h2>
+ <p>
+ {{membershipShort}}
+ </p>
+</div>
+<div class="quiqqer-memberships-profile-userprofile-membership-status-container grid-40 grid-parent">
+ <div class="quiqqer-memberships-profile-userprofile-membership-status grid-100">
+ <div class="grid-60">
+ {{labelAddedDate}}
+ </div>
+ <div class="grid-40">
+ {{addedDate}}
+ </div>
+ </div>
+ <div class="quiqqer-memberships-profile-userprofile-membership-status grid-100">
+ <div class="grid-60">
+ {{labelEndDate}}
+ </div>
+ <div class="grid-40">
+ {{endDate}}
+ </div>
+ </div>
+ <div class="quiqqer-memberships-profile-userprofile-membership-status grid-100">
+ <div class="grid-60">
+ {{labelStatus}}
+ </div>
+ <div class="grid-40">
+ {{{status}}}
+ <div class="quiqqer-memberships-profile-userprofile-btn"></div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/bin/controls/profile/UserProfile.MembershipStatus.html b/bin/controls/profile/UserProfile.MembershipStatus.html
deleted file mode 100644
index a067df6..0000000
--- a/bin/controls/profile/UserProfile.MembershipStatus.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<table class="quiqqer-memberships-profile-userprofile-table-status">
- <tr>
- <td>{{labelAddedDate}}</td>
- <td>{{addedDate}}</td>
- </tr>
- <tr class="quiqqer-memberships-profile-userprofile-table-status-enddate">
- <td>{{labelEndDate}}</td>
- <td>{{endDate}}</td>
- </tr>
- <tr>
- <td>{{labelStatus}}</td>
- <td>
- {{{status}}}
- <div class="quiqqer-memberships-profile-userprofile-btn"></div>
- </td>
- </tr>
-</table>
\ No newline at end of file
diff --git a/bin/controls/profile/UserProfile.css b/bin/controls/profile/UserProfile.css
index f396517..8471a64 100644
--- a/bin/controls/profile/UserProfile.css
+++ b/bin/controls/profile/UserProfile.css
@@ -1,3 +1,22 @@
+.quiqqer-memberships-profile-userprofile-membership {
+ float: left;
+ width: 100%;
+}
+
+.quiqqer-memberships-profile-userprofile-membership:not(:last-of-type) {
+ margin-bottom: 20px;
+}
+
+.quiqqer-memberships-profile-userprofile-membership-info-content:hover {
+ cursor: pointer;
+ opacity: 0.7;
+}
+
+.quiqqer-memberships-profile-userprofile-membership-info-content {
+ float: right;
+ font-size: 20px;
+}
+
.quiqqer-memberships-profile-userprofile-status-cancelled {
color: #ff0000;
}
@@ -10,10 +29,6 @@
color: #008000;
}
-.quiqqer-memberships-profile-userprofile-table__hidden {
- display: none;
-}
-
.quiqqer-memberships-profile-userprofile-btn .qui-button {
border: 1px solid #ff0000 !important;
font-size: 12px;
diff --git a/bin/controls/profile/UserProfile.html b/bin/controls/profile/UserProfile.html
index 9fa8448..654b992 100644
--- a/bin/controls/profile/UserProfile.html
+++ b/bin/controls/profile/UserProfile.html
@@ -1,11 +1,3 @@
<h1>{{header}}</h1>
<p class="quiqqer-memberships-profile-userprofile-info"></p>
-<table class="quiqqer-memberships-profile-userprofile-table">
- <thead>
- <tr>
- <th>{{headerMembership}}</th>
- <th>{{headerMembershipData}}</th>
- </tr>
- </thead>
- <tbody></tbody>
-</table>
\ No newline at end of file
+<div class="quiqqer-memberships-profile-userprofile-memberships grid-parent"></div>
\ No newline at end of file
diff --git a/bin/controls/profile/UserProfile.js b/bin/controls/profile/UserProfile.js
index 0d6bc19..a502c67 100644
--- a/bin/controls/profile/UserProfile.js
+++ b/bin/controls/profile/UserProfile.js
@@ -23,6 +23,7 @@ define('package/quiqqer/memberships/bin/controls/profile/UserProfile', [
'qui/controls/Control',
'qui/controls/loader/Loader',
'qui/controls/windows/Confirm',
+ 'qui/controls/windows/Popup',
'qui/controls/buttons/Button',
'package/quiqqer/memberships/bin/MembershipUsers',
@@ -32,11 +33,11 @@ define('package/quiqqer/memberships/bin/controls/profile/UserProfile', [
'Mustache',
'text!package/quiqqer/memberships/bin/controls/profile/UserProfile.html',
- 'text!package/quiqqer/memberships/bin/controls/profile/UserProfile.MembershipStatus.html',
+ 'text!package/quiqqer/memberships/bin/controls/profile/UserProfile.Membership.html',
'css!package/quiqqer/memberships/bin/controls/profile/UserProfile.css'
-], function (QUIControl, QUILoader, QUIConfirm, QUIButton, MembershipUsers,
- QUILocale, QUIAjax, Mustache, template, statusTemplate) {
+], function (QUIControl, QUILoader, QUIConfirm, QUIPopup, QUIButton, MembershipUsers,
+ QUILocale, QUIAjax, Mustache, template, membershipTemplate) {
"use strict";
var lg = 'quiqqer/memberships';
@@ -51,7 +52,8 @@ define('package/quiqqer/memberships/bin/controls/profile/UserProfile', [
'refresh',
'$build',
'$openCancelConfirm',
- '$openAbortCancelConfirm'
+ '$openAbortCancelConfirm',
+ '$getMembershipElm'
],
options: {
@@ -107,11 +109,9 @@ define('package/quiqqer/memberships/bin/controls/profile/UserProfile', [
* Fill table with membership data
*/
$build: function () {
- var self = this;
- var lgPrefix = 'controls.profile.userprofile.datatable.';
-
- var TableElm = this.$Elm.getElement(
- '.quiqqer-memberships-profile-userprofile-table'
+ var self = this;
+ var MembershipsElm = this.$Elm.getElement(
+ '.quiqqer-memberships-profile-userprofile-memberships'
);
var InfoElm = this.$Elm.getElement(
@@ -120,101 +120,138 @@ define('package/quiqqer/memberships/bin/controls/profile/UserProfile', [
// if user has no memberships, hide table and show info
if (!this.$memberships.length) {
- TableElm.addClass('quiqqer-memberships-profile-userprofile-table__hidden');
- InfoElm.set('html', QUILocale.get(lg, 'controls.profile.userprofile.info.no.memberships'));
+ InfoElm.set('html', QUILocale.get(lg,
+ 'controls.profile.userprofile.info.no.memberships'
+ ));
return;
}
- InfoElm.set('html', '');
- TableElm.removeClass('quiqqer-memberships-profile-userprofile-table__hidden');
-
- var TableBodyElm = TableElm.getElement('tbody');
-
- TableBodyElm.set('html', '');
-
for (var i = 0, len = this.$memberships.length; i < len; i++) {
var Membership = this.$memberships[i];
- var Row = new Element('tr').inject(TableBodyElm);
+ this.$getMembershipElm(Membership).inject(MembershipsElm);
+ }
+ },
- // Membership title and description
- new Element('td', {
- html: '<h2>' + Membership.membershipTitle + '</h2>' +
- '<p>' + Membership.membershipShort + '</p>'
- }).inject(Row);
+ /**
+ * Get HTMLElement that represents the Membership data
+ *
+ * @param {Object} Membership
+ * @return {HTMLElement}
+ */
+ $getMembershipElm: function (Membership) {
+ var self = this;
+ var status = 'active';
+ var lgPrefix = 'controls.profile.userprofile.datatable.';
+
+ if (Membership.cancelled) {
+ status = 'cancelled';
+ } else if (Membership.cancelDate) {
+ status = 'cancelled_start';
+ }
- // Membership data (dates and status)
- var status = 'active';
+ var endDateLabel;
- if (Membership.cancelled) {
- status = 'cancelled';
- } else if (Membership.cancelDate) {
- status = 'cancelled_start';
- }
+ if (Membership.autoExtend) {
+ endDateLabel = QUILocale.get(lg, lgPrefix + 'labelEndDate.autoExtend');
+ } else {
+ endDateLabel = QUILocale.get(lg, lgPrefix + 'labelEndDate.noAutoExtend');
+ }
- var StatusElm = new Element('td', {
- html: Mustache.render(statusTemplate, {
- labelAddedDate: QUILocale.get(lg, lgPrefix + 'labelAddedDate'),
- addedDate : Membership.addedDate,
- labelEndDate : QUILocale.get(lg, lgPrefix + 'labelEndDate'),
- endDate : Membership.endDate,
- labelStatus : QUILocale.get(lg, lgPrefix + 'labelStatus'),
- status : '<span class="quiqqer-memberships-profile-userprofile-status-'
- + status + '">' + QUILocale.get(lg, lgPrefix + 'status.' + status) +
- '</span>'
- })
- }).inject(Row);
-
- // only show "cancel" and "withdraw cancellation" btns on autoextend
- if (!Membership.autoExtend) {
- continue;
- }
+ var MembershipElm = new Element('div', {
+ 'class': 'quiqqer-memberships-profile-userprofile-membership grid-100',
+ html : Mustache.render(membershipTemplate, {
+ membershipTitle: Membership.membershipTitle,
+ membershipShort: Membership.membershipShort,
+ labelAddedDate : QUILocale.get(lg, lgPrefix + 'labelAddedDate'),
+ addedDate : Membership.addedDate,
+ labelEndDate : endDateLabel,
+ endDate : Membership.endDate,
+ labelStatus : QUILocale.get(lg, lgPrefix + 'labelStatus'),
+ status : '<span class="quiqqer-memberships-profile-userprofile-status-'
+ + status + '">' + QUILocale.get(lg, lgPrefix + 'status.' + status) +
+ '</span>'
+ })
+ });
- // if autoextend and not cancelled -> hide endDate
- if (!Membership.cancelled) {
- StatusElm.getElement(
- '.quiqqer-memberships-profile-userprofile-table-status-enddate'
- ).addClass('quiqqer-memberships-profile-userprofile-table__hidden');
- }
+ // show content btn
+ if (Membership.membershipContent !== '') {
+ var ShowContentElm = MembershipElm.getElement(
+ '.quiqqer-memberships-profile-userprofile-membership-info-title'
+ );
+
+ new Element('span', {
+ 'class': 'fa fa-info-circle quiqqer-memberships-profile-userprofile-membership-info-content',
+ events : {
+ click: function () {
+ self.$showMembershipContent(Membership);
+ }
+ }
+ }).inject(ShowContentElm);
+ }
+
+ // only show "cancel" and "withdraw cancellation" btns on autoextend
+ if (!Membership.autoExtend) {
+ return MembershipElm;
+ }
- if (status === 'active') {
- // cancel btn
- new QUIButton({
- membership: Membership,
- text : QUILocale.get(lg, 'controls.profile.userprofile.btn.cancel.text'),
- 'class' : 'btn-red',
- events : {
- onClick: function (Btn) {
- self.$openCancelConfirm(
- Btn.getAttribute('membership')
- );
- }
+ // if autoextend and not cancelled -> hide endDate
+ if (status === 'active') {
+ // cancel btn
+ new QUIButton({
+ membership: Membership,
+ text : QUILocale.get(lg, 'controls.profile.userprofile.btn.cancel.text'),
+ 'class' : 'btn-red',
+ events : {
+ onClick: function (Btn) {
+ self.$openCancelConfirm(
+ Btn.getAttribute('membership')
+ );
}
- }).inject(
- StatusElm.getElement(
- '.quiqqer-memberships-profile-userprofile-btn'
- )
- );
- } else {
- // abort cancel btn
- new QUIButton({
- membership: Membership,
- text : QUILocale.get(lg, 'controls.profile.userprofile.btn.abortcancel.text'),
- 'class' : 'btn-orange',
- events : {
- onClick: function (Btn) {
- self.$openAbortCancelConfirm(
- Btn.getAttribute('membership')
- );
- }
+ }
+ }).inject(
+ MembershipElm.getElement(
+ '.quiqqer-memberships-profile-userprofile-btn'
+ )
+ );
+ } else {
+ // abort cancel btn
+ new QUIButton({
+ membership: Membership,
+ text : QUILocale.get(lg, 'controls.profile.userprofile.btn.abortcancel.text'),
+ 'class' : 'btn-orange',
+ events : {
+ onClick: function (Btn) {
+ self.$openAbortCancelConfirm(
+ Btn.getAttribute('membership')
+ );
}
- }).inject(
- StatusElm.getElement(
- '.quiqqer-memberships-profile-userprofile-btn'
- )
- );
- }
+ }
+ }).inject(
+ MembershipElm.getElement(
+ '.quiqqer-memberships-profile-userprofile-btn'
+ )
+ );
}
+
+ return MembershipElm;
+ },
+
+ /**
+ * Show Membership Content
+ *
+ * @param {Object} Membership
+ */
+ $showMembershipContent: function (Membership) {
+ new QUIPopup({
+ content: Membership.membershipContent,
+ icon : 'fa fa-id-card-o',
+ title : QUILocale.get(lg,
+ 'controls.profile.userprofile.showcontent.title', {
+ title: Membership.membershipTitle
+ }
+ )
+ }).open();
},
/**
diff --git a/locale.xml b/locale.xml
index 925feaf..d5f8510 100644
--- a/locale.xml
+++ b/locale.xml
@@ -797,7 +797,11 @@
<de><![CDATA[In Mitgliedschaft seit]]></de>
<en><![CDATA[In membership since]]></en>
</locale>
- <locale name="controls.profile.userprofile.datatable.labelEndDate">
+ <locale name="controls.profile.userprofile.datatable.labelEndDate.autoExtend">
+ <de><![CDATA[Autom. Verlängerung am]]></de>
+ <en><![CDATA[Auto extend at]]></en>
+ </locale>
+ <locale name="controls.profile.userprofile.datatable.labelEndDate.noAutoExtend">
<de><![CDATA[Mitgliedschaft endet]]></de>
<en><![CDATA[Membership ends]]></en>
</locale>
@@ -869,6 +873,10 @@
<de><![CDATA[Es sind z.Z. keine Mitgliedschaften in Ihrem Nutzerprofil vorhanden.]]></de>
<en><![CDATA[There are currently no memberships in your user profile.]]></en>
</locale>
+ <locale name="controls.profile.userprofile.showcontent.title">
+ <de><![CDATA[Mitgliedschaft "[title]"]]></de>
+ <en><![CDATA[Membership "[title]"]]></en>
+ </locale>
<!-- Templates -->
<locale name="templates.mail.greeting">
diff --git a/settings.xml b/settings.xml
index 0d24a12..fb9db4c 100644
--- a/settings.xml
+++ b/settings.xml
@@ -130,7 +130,7 @@
</description>
</input>
- <select conf="memberships.viewDataMode">
+ <select conf="membershipusers.viewDataMode">
<text>
<locale group="quiqqer/memberships" var="settings.viewDataMode.title"/>
</text>
--
GitLab