Browse Source

ui: Added modal component, added a logging you in/out to try it.

1.0
Gisle Aune 6 years ago
parent
commit
bde67f5617
  1. 16
      marko/components/menu/component.js
  2. 11
      marko/components/menu/index.marko
  3. 5
      marko/components/modal/component.js
  4. 11
      marko/components/modal/index.marko
  5. 47
      marko/components/modal/style.less
  6. 6
      marko/page/story/components/story-menu/index.marko

16
marko/components/menu/component.js

@ -0,0 +1,16 @@
module.exports = class {
onCreate() {
this.state = {
loggingIn: false,
loggingOut: false,
}
}
loginClicked() {
this.state.loggingIn = true
}
logoutClicked() {
this.state.loggingOut = true
}
}

11
marko/components/menu/index.marko

@ -3,8 +3,15 @@
<if(input.user != null)> <if(input.user != null)>
<menu-gap /> <menu-gap />
<menu-header>User</menu-header> <menu-header>User</menu-header>
<menu-link if(!input.user.loggedIn) icon="L" href="/auth/login">Login</menu-link>
<menu-link if(input.user.loggedIn) icon="L" href="/auth/logout">Logout <span class="weak">(${input.user.name})</span></menu-link>
<menu-link if(!input.user.loggedIn) icon="L" href="/auth/login" on-click("loginClicked")>Login</menu-link>
<menu-link if(input.user.loggedIn) icon="L" href="/auth/logout" on-click("logoutClicked")>Logout <span class="weak">(${input.user.name})</span></menu-link>
<modal enabled=state.loggingIn notification title="Logging you in..." on-close("closeModal")>
<p>You may be redirected to Auth0 if it's been a while.</p>
</modal>
<modal enabled=state.loggingOut notification title="Logging you out..." on-close("closeModal")>
<p>You can probably log back in without entering your info if you're quick.</p>
</modal>
</if> </if>
<else-if(!input.allowNoUser)> <else-if(!input.allowNoUser)>
<menu-blurb class="error">input.user is missing!</menu-blurb> <menu-blurb class="error">input.user is missing!</menu-blurb>

5
marko/components/modal/component.js

@ -0,0 +1,5 @@
module.exports = class {
closeModal() {
this.emit("close")
}
}

11
marko/components/modal/index.marko

@ -0,0 +1,11 @@
<if(input.enabled)>
<div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
<div class="overlay-options color-menu">
<div if(input.closable) on-click("closeModal")>X</div>
</div>
<h1 class="color-primary" if(input.title)>${input.title}</h1>
<div class="modal color-text">
<include(input.renderBody) />
</div>
</div>
</if>

47
marko/components/modal/style.less

@ -0,0 +1,47 @@
div.overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top: 4em;
z-index: 999;
background-color: rgba(0, 0, 0, 0.75);
overflow-y: auto;
h1 {
text-align: center;
}
div.modal {
width: 60ch;
max-width: 95%;
margin: auto;
}
div.overlay-options {
width: 60ch;
max-width: 95%;
margin: auto;
text-align: right;
div {
opacity: 0.75;
user-select: none;
cursor: pointer;
}
div:hover {
opacity: 1;
}
}
}
div.overlay.notification-overlay {
padding-top: 20%;
div.modal {
text-align: center;
}
}

6
marko/page/story/components/story-menu/index.marko

@ -1,11 +1,11 @@
<menu user=input.user> <menu user=input.user>
<menu-header>Story</menu-header> <menu-header>Story</menu-header>
<menu-link selected=input.selected.index icon="S" href="/story/">Stories</menu-link>
<menu-link key="index" selected=input.selected.index icon="S" href="/story/">Stories</menu-link>
<menu-gap /> <menu-gap />
<menu-header>Categories</menu-header> <menu-header>Categories</menu-header>
<menu-link for(category in (input.categories||[])) selected=(input.selected.category == category.name) href=`/story/by-category/${category.name}` icon=category.name.charAt(0)>${category.name}</menu-link>
<menu-link for(category in (input.categories||[])) key=(category.name) selected=(input.selected.category == category.name) href=`/story/by-category/${category.name}` icon=category.name.charAt(0)>${category.name}</menu-link>
<menu-gap /> <menu-gap />
<menu-header>Tags</menu-header> <menu-header>Tags</menu-header>
<menu-link for(tag in (input.menuTags||[])) selected=(input.selected.tag === `${tag.kind}:${tag.name}`) href=`/story/by-tag/${tag.kind}/${tag.name}` textClass=`color-tag-${tag.kind.toLowerCase()}` icon=tag.kind.charAt(0)>${tag.name}</menu-link>
<menu-link for(tag in (input.menuTags||[])) key=(tag.kind+":"+tag.name) selected=(input.selected.tag === `${tag.kind}:${tag.name}`) href=`/story/by-tag/${tag.kind}/${tag.name}` textClass=`color-tag-${tag.kind.toLowerCase()}` icon=tag.kind.charAt(0)>${tag.name}</menu-link>
<menu-link selected=input.selected.tags icon="T" href="/story/tag-list/">Tags</menu-link> <menu-link selected=input.selected.tags icon="T" href="/story/tag-list/">Tags</menu-link>
</menu> </menu>
Loading…
Cancel
Save