branch feature/253-tuiles updated (e84d7a23 -> df76178d)
This is an automated email from the git hooks/post-receive script. New change to branch feature/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from e84d7a23 Init new Menu new df76178d ref #253 Intégration nouveau menu The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit df76178dfca89a152cfd0ab61d7e05585591366e Author: Cécilia Bossard <bossard@codelutin.com> Date: Tue Mar 10 17:19:01 2020 +0100 ref #253 Intégration nouveau menu Summary of changes: pollen-ui-riot-js/src/main/web/css/custom.css | 2 +- pollen-ui-riot-js/src/main/web/css/main.css | 8 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 52 ++++-- .../src/main/web/tag/PollenHeader.tag.html | 5 +- .../src/main/web/tag/PollenHeaderReboot.tag.html | 115 ++++++++++--- .../src/main/web/tag/poll/MyPollsHeader.tag.html | 8 +- .../src/main/web/tag/poll/Polls.tag.html | 180 ++++++++++++++++++++- 7 files changed, 322 insertions(+), 48 deletions(-) -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
This is an automated email from the git hooks/post-receive script. New commit to branch feature/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit df76178dfca89a152cfd0ab61d7e05585591366e Author: Cécilia Bossard <bossard@codelutin.com> Date: Tue Mar 10 17:19:01 2020 +0100 ref #253 Intégration nouveau menu --- pollen-ui-riot-js/src/main/web/css/custom.css | 2 +- pollen-ui-riot-js/src/main/web/css/main.css | 8 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 52 ++++-- .../src/main/web/tag/PollenHeader.tag.html | 5 +- .../src/main/web/tag/PollenHeaderReboot.tag.html | 115 ++++++++++--- .../src/main/web/tag/poll/MyPollsHeader.tag.html | 8 +- .../src/main/web/tag/poll/Polls.tag.html | 180 ++++++++++++++++++++- 7 files changed, 322 insertions(+), 48 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/custom.css b/pollen-ui-riot-js/src/main/web/css/custom.css index 0cfd4e4a..3babd6b3 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -30,7 +30,7 @@ --main: #04c4bb; --main-hover: #129993; - --background: #ffffff; + --background: #F7F7F7; --default: #2c3e50; --field-border: #96a8b2; diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index 7915e075..7b0c09d6 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -49,7 +49,7 @@ input, textarea { width: 100%; min-height: 100%; display: flex; - flex-direction: column; + flex-direction: row; position: absolute; } @@ -74,16 +74,17 @@ input, textarea { text-overflow: ellipsis; overflow: hidden; } - +/* .body-content { flex-grow: 1; overflow: hidden; background-color: var(--body-content-background); -} +}*/ .main-content { padding: 20px 2%; } +/* @media (orientation: portrait) { .body-content { @@ -98,6 +99,7 @@ input, textarea { flex-direction: column; } } +*/ a { text-decoration: none; diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html index a47b550d..b7ecf95b 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html @@ -23,6 +23,7 @@ import "./PollenWaiter.tag.html"; import "./Authorization.tag.html"; import "./PollenHeader.tag.html"; +import "./PollenHeaderReboot.tag.html"; import "./PollenFooter.tag.html"; import "./PollenMessageManager.tag.html"; import "./SignIn.tag.html"; @@ -58,10 +59,12 @@ import "./popup/ShowReportsModal.tag.html"; <ChoiceDetailModal/> <AddReportModal/> <ShowReportsModal/> - <PollenHeader/> <PollenWaiter parent-id="body-content"/> - <div id="body-content" class="body-content"> + <PollenHeaderReboot ref="menu" selectedPage="{pageTitle}"/> + + <div id="body-content" class="body-content"> + <PollenHeader/> <router> <route path="signup/validate"> <Authorization> @@ -156,14 +159,14 @@ import "./popup/ShowReportsModal.tag.html"; <route path="poll/*/edit/*"> <Authorization connected-if-required="true"> - <PageChanged page="editPoll"/> + <PageChanged page="polls"/> <EditPoll poll-id={routeArguments[0]} permission={routeArguments[1]}/> </Authorization> </route> <route path="poll/*/clone/*"> <Authorization connected-if-required="true"> - <PageChanged page="editPoll"/> + <PageChanged page="polls"/> <EditPoll poll-id={routeArguments[0]} permission={routeArguments[1]} clone={true}/> @@ -190,27 +193,27 @@ import "./popup/ShowReportsModal.tag.html"; </Authorization> </route> - <route path="polls/all"> + <!--<route path="polls/all"> <Authorization connected="true"> - <PageChanged page="allPolls"/> + <PageChanged page="polls"/> <Polls method="allPolls"/> </Authorization> </route> <route path="polls/created"> <Authorization connected="true"> - <PageChanged page="createdPolls"/> + <PageChanged page="polls"/> <Polls method="createdPolls"/> </Authorization> </route> <route path="polls/invited"> <Authorization connected="true"> - <PageChanged page="invitedPolls"/> + <PageChanged page="polls"/> <Polls method="invitedPolls"/> </Authorization> </route> <route path="polls/participated"> <Authorization connected="true"> - <PageChanged page="participatedPolls"/> + <PageChanged page="polls"/> <Polls method="participatedPolls"/> </Authorization> </route> @@ -231,13 +234,25 @@ import "./popup/ShowReportsModal.tag.html"; <PageChanged page="upcommingPolls"/> <Polls method="upcommingPolls"/> </Authorization> - </route> + </route>--> <route path="polls"> <Authorization admin="true"> <PageChanged page="admin_polls"/> <Polls method="polls"/> </Authorization> </route> + <route path="polls/mosaic"> + <Authorization connected="true"> + <PageChanged page="polls"/> + <Polls view="mosaicView"/> + </Authorization> + </route> + <route path="polls/list"> + <Authorization connected="true"> + <PageChanged page="polls"/> + <Polls view="listView"/> + </Authorization> + </route> <route path="users"> <Authorization admin="true"> @@ -292,7 +307,7 @@ import "./popup/ShowReportsModal.tag.html"; <SignIn ref="signIn"/> </div> - <PollenFooter/> + <!-- <PollenFooter/>--> <PollenMessageManager/> @@ -315,10 +330,15 @@ import "./popup/ShowReportsModal.tag.html"; document.title = this._l("pollen_title") + this._l(this.pageTitle); }; + this.updateMenu = () => { + this.refs.menu.onPageChanged(this.pageTitle); + }; + this.listen("pageChanged", (title) => { this.bus.trigger("closeSignIn"); this.pageTitle = title; this.updatePageTitle(); + this.updateMenu(); }); this.on("mount", () => { @@ -359,10 +379,7 @@ import "./popup/ShowReportsModal.tag.html"; </script> <style> - .body-content { - position: relative; - background: #E5E5E5; - } + .body-content > div { height: 100%; @@ -375,5 +392,10 @@ import "./popup/ShowReportsModal.tag.html"; z-index: 289; } + .body-content { + height: 100%; + width: 100%; + } + </style> </Pollen> diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html index 707bb1b8..2bd23bad 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html @@ -90,11 +90,12 @@ import "./components/MenuItem.tag.html"; display: flex; align-items: center; justify-content: space-between; - background: #E5E5E5; + background: #F7F7F7; padding-left: 2%; padding-right: 30px; padding-top: 30px; - color: var(--Mountain-Meadow) + color: var(--Mountain-Meadow); + padding-bottom: 10px; } .headerMenu { diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeaderReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeaderReboot.tag.html index f6cc078d..00836f87 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenHeaderReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeaderReboot.tag.html @@ -26,12 +26,31 @@ import "./components/Avatar.tag.html"; <div class="pollen-header {small ?'small':'full'}"> - <a class="home" href="#" target="_top">Pollen</a> + <div class="homeItem"> + <a class="home" href="#" target="_top">Pollen</a> + </div> + <div class="profileItem"> + <a if="{user}" href="#user/profile" class="link {selectedMenu === 'userProfile' ? 'selected' : ''}"> + <Avatar class="avatar" avatar={user.avatar} name={user.name} rounded="true"/><span>{_t.myProfile}</span> + </a> + </div> + <div class="menuItem"> + <a href="#poll/new/text" class="link {selectedMenu === 'newPoll' ? 'selected' : ''}" if="{canCreatePoll}"> + <i class="icon-new"></i> <span>{_t.newPoll}</span> + </a> + </div> + <div class="menuItem"> + <a if="{user}" href="#polls/mosaic" class="link {selectedMenu === 'polls' ? 'selected' : ''}" class="link"> + <i class="icon-my_poll"></i> <span>{_t.myPolls}</span> + </a> + </div> + <div class="menuItem"> + <a if="{user}" href="#favoriteLists" class="link {selectedMenu === 'favoriteLists' ? 'selected' : ''}"> + <i class="icon-voter_list"></i> <span>{_t.myFavoriteLists}</span> + </a> + </div> + - <a if="{user}" href="#user/profile"><Avatar class="avatar" avatar={user.avatar} name={user.name} rounded="true"/><span>{_t.myProfile}</span></a> - <a href="#poll/new/text" class="link" if="{canCreatePoll}"><i class="icon-new"></i> <span>Nouveau sondage</span></a> - <a href="#polls/created" class="link"><i class="icon-my_poll"></i> <span>{_t.myPolls}</span></a> - <a href="#favoriteLists" class="link"><i class="icon-voter_list"></i> <span>{_t.myFavoriteLists}</span></a> <div class="growing"></div> <!--a><i class="icon-notification"></i><span>Mes notifications</span></a--> <div if="{small}" class="open" onclick="{onChevronClick}"><i class="icon-double-chevron"></i></div> @@ -49,6 +68,8 @@ import "./components/Avatar.tag.html"; this.small = true; + this.selectedMenu = undefined; + this.signIn = () => { this.bus.trigger("signIn"); }; @@ -59,10 +80,9 @@ import "./components/Avatar.tag.html"; }); }; - this.user = this.session.getUser(); this.admin = this.user && this.user.administrator; - this.canCreatePoll = false; + this.canCreatePoll = this.session.isCanCreatePoll(); this.onUserChange = user => { this.user = user; @@ -78,6 +98,20 @@ import "./components/Avatar.tag.html"; this.update(); } + this.onPageChanged = (selectedPage) => { + console.log("MENU PAGE CHANGED"); + console.log(selectedPage); + + if(selectedPage === "userProfile" + || selectedPage === "newPoll" + || selectedPage === "favoriteLists") { + this.selectedMenu = selectedPage; + } else { + this.selectedMenu = "polls"; + } + this.update(); + } + </script> <style> @@ -120,11 +154,12 @@ import "./components/Avatar.tag.html"; .pollen-header a.link { color: var(--White); - height: 50px; - padding-top:20px; overflow: hidden; white-space: nowrap; text-decoration:none; + width: 100%; + display: flex; + align-items: center; } .pollen-header a.link:hover { @@ -132,6 +167,16 @@ import "./components/Avatar.tag.html"; box-shadow: inset 10px 0 var(--White); } + .pollen-header .selected { + background-color:var(--Elm); + box-shadow: inset 10px 0 var(--White); + } + + .pollen-header a.link .selected { + background-color:var(--Elm); + box-shadow: inset 10px 0 var(--White); + } + .pollen-header a.link i { width : 30px; height : 30px; @@ -149,7 +194,7 @@ import "./components/Avatar.tag.html"; font-style: normal; font-weight: normal; margin-left: 10px; - font-size: 24px; + font-size: 15px; line-height: 24x; } @@ -158,26 +203,60 @@ import "./components/Avatar.tag.html"; } .pollen-header .open { - height: 50px; - padding-top:20px; + height: 70px; + padding-top: 20px; margin-left: 45px; font-size: 30px; + margin-bottom: 30px; } .pollen-header .close { - height: 50px; + height: 70px; padding-top:20px; margin-left: 45px; font-size: 30px; transform: rotate(180deg); transform-origin: 15px 37px; + margin-bottom: 30px; + } + + .avatar svg { + height: 50px; + width: 50px; + } + + .avatar img { + height: 50px; + width: 50px; + } + + .avatar text { + font-size: 35px; + } + + .homeItem { + height: 80px; + padding-top: 18px; + margin-bottom: 10px; + } + + .profileItem { + height: 70px; + margin-bottom: 30px; + display: flex; + } + + .profileItem a { + padding-left: 35px; + display: flex; + align-items: center; } - .avatar { - margin-left:35px; - margin-top:10px; - padding-top:10px; - padding-bottom:10px; + .menuItem { + height: 70px; + display: flex; } + + </style> </PollenHeaderReboot> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html index 971126be..ef0ae924 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html @@ -55,18 +55,18 @@ import "../popup/ModalReboot.tag.html"; <MenuItem label="{_t.upcommingPolls}" ref="upcommingPolls" currentPage="{this.parent.currentPage}" onclick="{this.upcommingPolls}" isactive="{this.parent.currentPage === this.parent.pages.UPCOMMING}"/> </div> <div class="rightSubMenu"> - <MenuItem href="#" label="Duplicate" ref="duplicatePolls" show="{this.parent.currentState === this.parent.pageStates.POLL_SELECTED}"/> + <!-- <MenuItem href="#" label="Duplicate" ref="duplicatePolls" show="{this.parent.currentState === this.parent.pageStates.POLL_SELECTED}"/>--> <MenuItem href="#" label="Delete" ref="deletePolls" onclick="{this.deletePolls}" show="{this.parent.currentState === this.parent.pageStates.POLL_SELECTED}"/> <Separator ref="rightSubMenuSeparator" show="{this.parent.currentState === this.parent.pageStates.POLL_SELECTED}"/> - <IconButton icon="icon-List" /> - <IconButton href="#" icon="icon-Mosaic" active="true"/> + <IconButton href="#polls/list" icon="icon-List" active="{this.parent.currentView === this.parent.pageView.LIST}"/> + <IconButton href="#polls/mosaic" icon="icon-Mosaic" active="{this.parent.currentView === this.parent.pageView.MOSAIC}"/> </div> </div> <ModalReboot ref="assignModal" onsubmit={assign} header={_t.assignPollToMe_title} label={_t.assignPollToMe} type="success"> <div class="modal-form"> <span class="modal-description">{parent._t.assignPollToMe_desc}</span> - <PollenInput label="URL" name="pollToAssign" ref="pollToAssign" placeholder={parent.pollToAssignPlaceholder} + <PollenInput label="URL" name="pollToAssign" ref="pollToAssign" placeholder={parent.pollToAssignPlaceholder} pattern={parent.pollToAssignUrlPattern} required="true" /> </div> </ModalReboot> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html index 1f4a1e05..e4ceaec4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html @@ -25,7 +25,6 @@ import "../components/LoadingCard.tag.html"; import "./MyPollsHeader.tag.html"; import "./NoPoll.tag.html"; - <Polls> <div class="container" > @@ -33,7 +32,8 @@ import "./NoPoll.tag.html"; <div class="main-content"> - <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements" > + <!-- Affichage de la mosaïque --> + <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements" if="{currentView === pageView.MOSAIC}"> <yield to="element"> <PollCardReboot poll={element} on-poll-list-change={parent.parent.refresh} ontogglecheckbox="{parent.parent.ontogglecheckbox}"/> </yield> @@ -47,6 +47,93 @@ import "./NoPoll.tag.html"; </yield> </LazyLoad> + <!-- Affichage en liste --> + <div if="{currentView === pageView.LIST}" class="tableView"> + + + <!-- Header --> +<!-- <div class="table-row header"> + <div class="column index"><span></span></div> + <div class="column checkbox"> + <CheckboxReboot class="checkbox-footer" ontogglecheckbox="{ontogglecheckbox}"></CheckboxReboot> + </div> + <div class="wrapper attributes"> + <div class="column title"><span>Name</span></div> + <div class="column status"><span>Status</span></div> + <div class="column votes"><span>Votes</span></div> + <div class="column author"><span>Author</span></div> + <div class="column description"><span>Description</span></div> + <div class="column creation"><span>Creation date</span></div> + <div class="column end"><span>End date</span></div> + </div> + </div>--> + + <!-- Lines --> + <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements" > + <yield to="element"> + <!-- <div class="table-row"> + + <div class="column index"> + <Tooltip position="top" content="Menu"> + <i class="menu icon-burger"></i> + </Tooltip> + </div> + <div class="column checkbox"> + <CheckboxReboot class="checkbox-footer" ontogglecheckbox="{ontogglecheckbox}"></CheckboxReboot> + </div> + <div class="wrapper attributes"> + <div class="column title"><span>{element.title}</span></div> + <div class="column status"> + <Tooltip if="{element.status === 'VOTING'}" position="top" content="Current"> + <i class="icon icon-current"></i> + </Tooltip> + + <Tooltip if="{element.status === 'CLOSED'}" position="top" content="Finished"> + <i class="icon icon-past"></i> + </Tooltip> + + <Tooltip if="{element.status === 'CREATED'}" position="top" content="Upcoming"> + <i class="icon icon-upcoming"></i> + </Tooltip> + </div> + <div class="column votes"> + <Tooltip position="top" content="{element.questions[0].voteCount === 0 ? 0 : (element.questions[0].voteCount)} votes"> + <div class="voters">{parent.element.questions[0].voteCount === 0 ? "-" : (parent.element.questions[0].voteCount)}</div></Tooltip> + </Tooltip></div> + <div class="column author"> + <Tooltip position="top" content="{element.creatorName}"> + <Avatar class="avatar" avatar={parent.element.creatorAvatar} name={parent.element.creatorName} rounded="true"/><span>{parent.element.creatorName}</span> + </Tooltip> + </div> + <div class="column description"> + <div class="poll-description" if="{element.description}">{element.description}</div> + <div class="poll-no-description" if="{!element.description}">{_t.noDescription}</div> + </div> + <div class="column creation"> + <span class="timing">{element.beginDate}</span> + </div> + <div class="column end"> + <span class="timing">{element.endDate}</span> + </div> + </div> + + </div>--> + + + </yield> + <yield to="loading"> + <LoadingCard loading={nbNextGroup}> + {parent.parent._l("loading", nbNext)} + </LoadingCard> + </yield> + <yield to="noResult"> + <NoPoll method="{this.opts.method}"></NoPoll> + </yield> + </LazyLoad> + + </div> + + </div> </div> @@ -54,6 +141,11 @@ import "./NoPoll.tag.html"; import session from "../../js/Session"; import pollService from "../../js/PollService"; + this.pageView = { + MOSAIC: "mosaicView", + LIST: "listView" + }; + this.pageStates = { LOADING: "loading", NO_POLL: "no_poll", @@ -84,7 +176,8 @@ import "./NoPoll.tag.html"; this.checkedBoxes = []; this.currentState = this.pageStates.LOADING; - this.currentPage = this.opts.method; + this.currentPage = this.opts.method ? this.opts.method : this.pages.CREATED; + this.currentView = this.opts.view ? this.opts.view : this.pageView.MOSAIC; this.filterPolls = (method) => { this.method = method; @@ -138,7 +231,7 @@ import "./NoPoll.tag.html"; <style> .container { - background: #E5E5E5; + background: #F7F7F7; } .elements { @@ -147,10 +240,87 @@ import "./NoPoll.tag.html"; justify-content: space-between; width: 100%; } +<!-- + .table-row { + display: flex; + display: -webkit-flex; + flex-direction: row; + -webkit-flex-direction: row; + flex-wrap: no-wrap; + -webkit-flex-wrap: no-wrap; + width: 100%; + padding-left: 15px; + padding-right: 15px; + + height: 70px; + + } - .main-content { + .selected { + background: var(--White); + } + .wrapper { + display: flex; + display: -webkit-flex; + flex-direction: row; + -webkit-flex-direction: row; + } + .column { + flex-grow: 0; + -webkit-flex-grow: 0; + flex-shrink: 0; + -webkit-flex-shrink: 0; + vertical-align: top; + } + .index, .checkbox { + width: 50px; + } + .title { + width: 320px; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 22px; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + .status, .votes{ + width: 50px; + } + + .author { + width: 150px; + } + + .description { + width: 200px; + } + + .creation, .end { + width: 100px; + } + + .icon { + display: flex; + align-items:center; + justify-content:center; + width : 30px; + height : 30px; + border-radius:15px; + } + + .closed div { + color: var(--Purple); + } + + .voting div { + color: var(--Pizazz); + }--> + + </style> </Polls> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm