Skip to content
This repository has been archived by the owner on Sep 13, 2021. It is now read-only.

Commit

Permalink
feat: show list of teams in submenu (#87)
Browse files Browse the repository at this point in the history
* feat: show list of teams in submenu

* feat: show active team in create menu

* styles refactoring to reach TeamSelect and VisArchive

* feat: user can switch active team via submenu

* ui: fix styles in vis archive

* show active team in hello world view

* check if user.teams exists

* show active team in hello world page

* add "(private)" to no team

* bump service-utils
  • Loading branch information
gka authored Aug 26, 2021
1 parent 92b5863 commit 7013ea9
Show file tree
Hide file tree
Showing 10 changed files with 158 additions and 89 deletions.
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@datawrapper/locales": "^1.2.6",
"@datawrapper/orm": "^3.25.0",
"@datawrapper/schemas": "^1.12.1",
"@datawrapper/service-utils": "^1.1.0",
"@datawrapper/service-utils": "^1.2.0",
"@datawrapper/shared": "^0.35.0",
"@hapi/bell": "^12.2.0",
"@hapi/catbox-memory": "^5.0.1",
Expand Down
4 changes: 3 additions & 1 deletion src/auth/dw-auth.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ const Boom = require('@hapi/boom');
const Bell = require('@hapi/bell');
const get = require('lodash/get');
const { cookieValidation, adminValidation, createCookieAuthScheme } =
require('@datawrapper/service-utils/auth')(require('@datawrapper/orm/models'));
require('@datawrapper/service-utils/auth')(require('@datawrapper/orm/models'), {
includeTeams: true
});
const cookieAuthScheme = createCookieAuthScheme(true);

const DWAuth = {
Expand Down
3 changes: 3 additions & 0 deletions src/utils/header-links.js
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,9 @@ module.exports = {
content:
'<span class="has-text-grey is-size-7" style="font-weight:normal">Select active team</span>'
},
{
type: 'teamSelector'
},
{
type: 'separator'
},
Expand Down
4 changes: 3 additions & 1 deletion src/utils/svelte-view/context.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ module.exports = function (request) {
name: auth.artifacts.email,
language: userLang,
isAdmin: auth.artifacts.isAdmin(),
isGuest: false
isGuest: false,
teams: auth.artifacts.teams,
activeTeam: auth.artifacts.activeTeam
}
: {
id: -1,
Expand Down
7 changes: 6 additions & 1 deletion src/views/HelloWorld.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,11 @@
<p class="subtitle is-3 has-text-grey">A Datawrapper demo page</p>
<h3 id="welcome" class="title is-4 mt-3" style="color:#c04" on:click={knock}>
{message}
{#if $user && $user.activeTeam}
Your active team is <b>{$user.activeTeam.name}</b>.
{:else}
You don't have an active team.
{/if}
</h3>
<div class="content">
<p class="subtitle">
Expand All @@ -117,7 +122,7 @@
>Bulma CSS framework</a
>.
</p>
<p>{__('team / invite / intro')}</p>
<p>A translation test: {__('team / invite / intro')}</p>
<p>
The magic number is&nbsp;<b>{magicNumber}</b>, and it keeps increasing
because Svelte client-side hydration works!
Expand Down
3 changes: 2 additions & 1 deletion src/views/layout/partials/bulma/Notification.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
export let deletable = true;
export let type = '';
export let visible = true;
export let className = '';
</script>

{#if visible}
<div class="notification {type ? `is-${type}` : ''}">
<div class="notification {type ? `is-${type}` : ''} {className}">
{#if deletable}<button
aria-label="delete"
on:click={() => (visible = false)}
Expand Down
142 changes: 70 additions & 72 deletions src/views/layout/partials/header/NavBar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { getContext } from 'svelte';
import SvgIcon from 'layout/partials/SvgIcon.svelte';
import VisArchive from './VisArchive.svelte';
import TeamSelect from './TeamSelect.svelte';
export let isActive;
Expand Down Expand Up @@ -52,21 +53,15 @@
{:else if subItem.type === 'activeTeam'}
<div class="navbar-item active-team is-size-7">
In: <SvgIcon
icon="folder-shared"
icon="folder{$user.activeTeam ? '-shared' : ''}"
color="#a7a7a7"
className="mx-1"
size="1.2rem"
/> TeamName
</div>
{:else if subItem.type === 'visArchive'}
<div class="navbar-item active-team is-size-7">
In: <SvgIcon
icon="folder-shared"
color="#a7a7a7"
className="mx-1"
size="1.2rem"
/> TeamName
/>
{$user.activeTeam ? $user.activeTeam.name : 'My Charts'}
</div>
{:else if subItem.type === 'teamSelector'}
<TeamSelect />
{:else if subItem.type === 'html'}
<div class="navbar-item" style={subItem.style || ''}>
{@html subItem.content}
Expand Down Expand Up @@ -109,79 +104,82 @@
</div>

<style lang="less">
:global(.navbar-dropdown) {
border-radius: var(--box-border-radius);
border: 1px solid var(--color-dw-gray);
box-shadow: 0px 4px 4px 0px #00000040;
}
.navbar-menu {
:global(.navbar-item) {
transition: none !important;
font-size: 16px;
font-family: Roboto;
font-weight: 500;
margin: 0 0.2rem;
padding: 0.25rem 1rem !important;
transition: all 0.5s ease-in-out;
div.navbar-item,
a.navbar-item {
transition: none !important;
}
&:hover {
background: var(--color-dw-gray-90) !important;
border-radius: var(--box-border-radius);
div.navbar-item {
&:hover {
background: var(--color-dw-gray-90) !important;
border-radius: var(--box-border-radius);
a.navbar-link:hover {
background: none !important;
}
}
a.navbar-link:hover {
background: none !important;
&.is-active {
background: var(--color-dw-blue-light) !important;
border-radius: var(--box-border-radius);
}
}
&.just-arrow {
padding: 0 !important;
margin: 0 !important;
// margin-left: -1.5em!important;
&.just-arrow {
padding: 0 !important;
margin: 0 !important;
// margin-left: -1.5em!important;
.navbar-link:after {
right: 1.4em;
.navbar-link:after {
right: 1.4em;
}
}
}
}
a.navbar-item:hover {
background: var(--color-dw-gray-90) !important;
border-radius: var(--box-border-radius);
}
.navbar-item.is-active {
background: var(--color-dw-blue-light) !important;
border-radius: var(--box-border-radius);
}
:global(.navbar-item .icon) {
margin-right: 1ex;
color: var(--color-dw-blue-medium);
}
.navbar-item {
font-size: 16px;
font-family: Roboto;
font-weight: 500;
margin: 0 0.2rem;
padding: 0.25rem 1rem !important;
transition: all 0.5s ease-in-out;
}
:global(a.navbar-item:hover) {
background: var(--color-dw-gray-90) !important;
border-radius: var(--box-border-radius);
}
.navbar-item :global(.icon) {
margin-right: 1ex;
color: var(--color-dw-blue-medium);
}
.navbar-item.active-team {
background: #f9f9f9;
font-weight: normal;
color: #a7a7a7;
margin: 0;
margin-bottom: 0px;
margin-bottom: -0.5rem;
padding: 0.5rem 1rem !important;
border-bottom-left-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
}
:global(.navbar-dropdown) {
border-radius: var(--box-border-radius);
border: 1px solid var(--color-dw-gray);
box-shadow: 0px 4px 4px 0px #00000040;
}
.navbar-separator span {
border-left: 1px solid var(--color-dw-gray);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
display: inline-block;
height: 2.2rem;
transition: all 0.5s ease-in-out;
:global(.navbar-dropdown .navbar-item) {
font-weight: normal;
font-size: 14px;
}
:global(.navbar-dropdown .navbar-item.active-team) {
background: #f9f9f9;
font-weight: normal;
color: #a7a7a7;
margin: 0;
margin-bottom: 0px;
margin-bottom: -0.5rem;
padding: 0.5rem 1rem !important;
border-bottom-left-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
}
.navbar-separator span {
border-left: 1px solid var(--color-dw-gray);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
display: inline-block;
height: 2.2rem;
transition: all 0.5s ease-in-out;
}
}
:global(.navbar-compact) .navbar-separator span {
Expand Down
57 changes: 57 additions & 0 deletions src/views/layout/partials/header/TeamSelect.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<script>
import SvgIcon from 'layout/partials/SvgIcon.svelte';
import { getContext } from 'svelte';
import { patch } from '@datawrapper/shared/httpReq';
const user = getContext('user');
async function select(team) {
await patch('/v3/me/settings', {
payload: {
activeTeam: team ? team.id : null
}
});
$user.activeTeam = team;
$user.teams.forEach(t => {
t.active = team && t.id === team.id;
});
$user = $user;
}
</script>

{#if $user.teams && $user.teams.length}
{#each $user.teams as team}
<a
href="#/select-team/{team.id}"
class="navbar-item team-select"
class:is-active-team={team.active}
on:click|preventDefault={() => select(team)}
>
<SvgIcon icon="team{team.active ? '-check' : ''}" size="20px" />
{team.name}
</a>
{/each}
<a
href="#/select-team/none"
on:click|preventDefault={() => select(null)}
class="navbar-item team-select"
class:is-active-team={!$user.activeTeam}
>
<SvgIcon icon="user{!$user.activeTeam ? '-check' : ''}" size="20px" /> No team
<span class="has-text-grey">(private)</span>
</a>
{:else}
<a class="navbar-item" href="/account/teams"> Create a team </a>
{/if}

<style>
.team-select :global(.icon) {
color: var(--color-dw-gray-50) !important;
}
.team-select.is-active-team {
cursor: default;
}
.team-select.is-active-team :global(.icon) {
color: var(--color-dw-blue-medium) !important;
}
</style>
11 changes: 6 additions & 5 deletions src/views/layout/partials/header/VisArchive.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</div>
{:else}
{#each items as item}
<a class="navbar-item" href="/chart/{item.id}/edit">
<a class="navbar-item vis-archive-item" href="/chart/{item.id}/edit">
<div class="columns is-variable is-0">
<div class="column is-narrow">
<img width="40" src={item.thumbnails.plain} alt="" class="mr-2" />
Expand All @@ -55,11 +55,12 @@
top: 2px;
max-height: auto;
}
.navbar-item {
.vis-archive-item {
display: inline-block;
width: 100%;
font-weight: normal;
width: 98%;
font-weight: normal !important;
padding-right: 1rem !important;
white-space: normal;
white-space: normal !important;
font-size: 13px !important;
}
</style>

0 comments on commit 7013ea9

Please sign in to comment.