branch feature/253-tuiles updated (987cf920 -> e84d7a23)
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 987cf920 ref #253 Code style new e84d7a23 Init new 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 e84d7a231a0898de1ce93adb34add30402ba04ce Author: jcouteau <couteau@codelutin.com> Date: Tue Mar 10 11:17:46 2020 +0100 Init new Menu Summary of changes: 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(+) create mode 100644 pollen-ui-riot-js/src/main/web/tag/PollenHeaderReboot.tag.html create mode 100644 pollen-ui-riot-js/stories/PollenHeader.stories.js -- 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 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>.
participants (1)
-
chorem.org scm