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>.