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 e84d7a231a0898de1ce93adb34add30402ba04ce Author: jcouteau <couteau@codelutin.com> Date: Tue Mar 10 11:17:46 2020 +0100 Init new Menu --- pollen-ui-riot-js/src/main/web/css/custom.css | 8 + .../src/main/web/tag/PollenHeaderReboot.tag.html | 183 +++++++++++++++++++++ pollen-ui-riot-js/stories/PollenHeader.stories.js | 16 ++ 3 files changed, 207 insertions(+) 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 632a5e98..0cfd4e4a 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -19,7 +19,15 @@ * #L% */ + + + @font-face { + font-family: 'pacifico'; + src: url('Pacifico.ttf'); + } + :root{ + --main: #04c4bb; --main-hover: #129993; --background: #ffffff; 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 new file mode 100644 index 00000000..f6cc078d --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeaderReboot.tag.html @@ -0,0 +1,183 @@ +/*- +* #%L + * Pollen :: UI (Riot Js) + * + %% + Copyright (C) 2009 - 2017 CodeLutin + * + %% + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. + #L% +*/ +import "./HeaderI18n.tag.html"; +import "./components/Avatar.tag.html"; +<PollenHeaderReboot> + + <div class="pollen-header {small ?'small':'full'}"> + + <a class="home" href="#" target="_top">Pollen</a> + + <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> + <div if="{!small}" class="close" onclick="{onChevronClick}"><i class="icon-double-chevron"></i></div> + </div> + + <script type="es6"> + import "../css/icons.css"; + import route from "riot-route/lib/tag"; + import session from "../js/Session"; + + this.session = session; + + this.installBundle(this.session, "header"); + + this.small = true; + + this.signIn = () => { + this.bus.trigger("signIn"); + }; + + this.signOut = () => { + this.session.signOut().then(() => { + route(""); + }); + }; + + + this.user = this.session.getUser(); + this.admin = this.user && this.user.administrator; + this.canCreatePoll = false; + + this.onUserChange = user => { + this.user = user; + this.admin = user && user.administrator; + this.canCreatePoll = this.session.isCanCreatePoll(); + this.update(); + }; + + this.listen("user", this.onUserChange); + + this.onChevronClick = () => { + this.small = !this.small; + this.update(); + } + + </script> + + <style> + + .small { + width: 120px; + } + + .full { + width: 250px; + } + + .pollen-header { + color: var(--White); + display: flex; + flex-direction: column; + background-color: var(--Mountain-Meadow); + height: 100%; + } + + .pollen-header .home { + padding-left: 27px; + color: var(--White); + font-family: pacifico; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 42px; + text-decoration:none; + padding-bottom:29px; + } + + .pollen-header .home a:hover { + background-color:var(--Mountain-Meadow); + } + + .pollen-header .home a { + text-decoration:none; + } + + .pollen-header a.link { + color: var(--White); + height: 50px; + padding-top:20px; + overflow: hidden; + white-space: nowrap; + text-decoration:none; + } + + .pollen-header a.link:hover { + background-color:var(--Elm); + box-shadow: inset 10px 0 var(--White); + } + + .pollen-header a.link i { + width : 30px; + height : 30px; + font-size: 30px; + + margin-left: 45px; + } + + .small span { + display:none; + } + + .full span { + font-family: Open-Sans; + font-style: normal; + font-weight: normal; + margin-left: 10px; + font-size: 24px; + line-height: 24x; + } + + .growing { + flex-grow: 1; + } + + .pollen-header .open { + height: 50px; + padding-top:20px; + margin-left: 45px; + font-size: 30px; + } + + .pollen-header .close { + height: 50px; + padding-top:20px; + margin-left: 45px; + font-size: 30px; + transform: rotate(180deg); + transform-origin: 15px 37px; + } + + .avatar { + margin-left:35px; + margin-top:10px; + padding-top:10px; + padding-bottom:10px; + } + </style> +</PollenHeaderReboot> diff --git a/pollen-ui-riot-js/stories/PollenHeader.stories.js b/pollen-ui-riot-js/stories/PollenHeader.stories.js new file mode 100644 index 00000000..8ae9802a --- /dev/null +++ b/pollen-ui-riot-js/stories/PollenHeader.stories.js @@ -0,0 +1,16 @@ +import {tag, mount, storiesOf, asCompiledCode} from "@storybook/riot"; + +import i18nHelper from "../src/main/web/js/I18nHelper"; +import uiHelper from "../src/main/web/js/UIHelper"; +import riot from "riot"; + +import "../src/main/web/css/custom.css"; +import "../src/main/web/tag/PollenHeaderReboot.tag.html"; + +export default {title: "PollenHeader"}; + +export const pollHeaderReboot = () => { + riot.mixin(uiHelper); + riot.mixin(i18nHelper); + return mount("pollenheaderreboot"); +}; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.