Skip to content

Commit d6d0e5e

Browse files
hiddehidde
authored
Merge pull request #175 from hidde/orgchart-mobile-flow
Avoid modal overlay when highlighting user in org chart on mobile, allow manual opening
2 parents 1b6ead1 + ac71618 commit d6d0e5e

9 files changed

Lines changed: 48 additions & 61 deletions

File tree

‎src/assets/images/org-chart.svg‎

Lines changed: 3 additions & 1 deletion
Loading

‎src/components/OrgNode.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<li :id="data.username" :class="'org-node' + ( data.username === this.$route.params.username ? ' org-node--current' : '')">
3-
<RouterLink :to="{ name: 'OrgchartHighlight', params: { username: data.username } }" :id="`org-node-${prefix}`">
3+
<RouterLink :to="{ name: 'Orgchart', params: { username: data.username, openedFromOrgNode: true, } }" :id="`org-node-${prefix}`">
44
<UserPicture :picture="data.picture" :username="data.username" :size="40" :isStaff="true"></UserPicture>
55
<span class="org-node__name">{{ data.firstName }} {{ data.lastName }}</span>
66
<span class="org-node__title">{{ data.title }}</span>

‎src/components/Profile.vue‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -43,26 +43,27 @@
4343
<a id="nav-relations" class="profile__anchor"></a>
4444
<header class="profile__section-header">
4545
<h2>Relations</h2>
46-
<div class="hide-mobile profile__section-header-button-holder">
47-
<RouterLink :to="{ name: 'OrgchartHighlight', params: { username } }" class="button button--secondary button--small">
48-
Org Chart
49-
<svg
50-
aria-hidden="true"
51-
role="presentation"
52-
xmlns="http://www.w3.org/2000/svg"
53-
width="16"
54-
height="16"
55-
viewBox="0 0 24 24"
56-
fill="none"
57-
stroke="currentColor"
58-
stroke-width="2"
59-
stroke-linecap="round"
60-
stroke-linejoin="round"
61-
>
62-
<polyline points="9 18 15 12 9 6" />
63-
</svg>
64-
</RouterLink>
65-
</div>
46+
<RouterLink :to="{ name: 'OrgchartHighlight', params: { username } }" class="button button--secondary button--small">
47+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" aria-hidden="true" role="presentation">
48+
<path fill="currentColor" fill-rule="nonzero" d="M6.222 6.889a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333zm-.444 1.055A1.779 1.779 0 1 1 6.222 8h-.444v-.056zm3.555 3.612a1.778 1.778 0 1 1 0-3.556 1.778 1.778 0 0 1 0 3.556zm0-1.112a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333zm-7.11-6a1.778 1.778 0 1 1 0-3.555 1.778 1.778 0 0 1 0 3.555zm0-1.11a.667.667 0 1 0 0-1.334.667.667 0 0 0 0 1.333zm-.445 1.11h.444v.445h-.444v-.445zm0 .89h.444v.444h-.444v-.445zm.444 1.333H2a.222.222 0 0 1-.222-.222v-.223h.444v.445zm.445 0v-.445h.444v.445h-.444zm1.333 0v-.445h.444v.445H4zm1.778 1.777h.444v.445h-.444v-.445zm.444 1.778H6A.222.222 0 0 1 5.778 10v-.222h.444v.444zm.445 0v-.444h.444v.444h-.444z"/>
49+
</svg>
50+
Org Chart
51+
<svg
52+
aria-hidden="true"
53+
role="presentation"
54+
xmlns="http://www.w3.org/2000/svg"
55+
width="16"
56+
height="16"
57+
viewBox="0 0 24 24"
58+
fill="none"
59+
stroke="currentColor"
60+
stroke-width="2"
61+
stroke-linecap="round"
62+
stroke-linejoin="round"
63+
>
64+
<polyline points="9 18 15 12 9 6" />
65+
</svg>
66+
</RouterLink>
6667
</header>
6768
<ReportingStructure v-if="manager || directs.length > 0" :manager="manager" :directs="directs">
6869
</ReportingStructure>
@@ -366,7 +367,7 @@ export default {
366367
.profile__section-header h2 {
367368
margin: 0;
368369
}
369-
.profile__section-header-button-holder {
370+
.profile__section-header > a {
370371
margin-left: auto;
371372
}
372373

‎src/components/SearchForm.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
<span class="visually-hidden">Clear query</span>
2424
</button>
2525
<button type="submit" class="search-form__submit">
26-
<img src="@/assets/images/search.svg" alt="" role="presentation" aria-hidden="true" width="20" />
26+
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-labelledby="search-submit-icon-title">
27+
<title id="search-submit-icon-title">Search</title>
28+
<path d="M17.842 17.158a.537.537 0 0 1 .158.396c0 .158-.053.29-.158.395a.556.556 0 0 1-.404.176.556.556 0 0 1-.405-.176l-5.449-5.484c-.621.539-1.324.96-2.11 1.265a6.838 6.838 0 0 1-2.495.457 6.847 6.847 0 0 1-2.743-.553 7.208 7.208 0 0 1-2.24-1.503A6.909 6.909 0 0 1 .491 9.898a6.942 6.942 0 0 1-.545-2.742c0-.972.182-1.886.545-2.742.363-.855.864-1.6 1.503-2.232A7.208 7.208 0 0 1 4.236.679 6.847 6.847 0 0 1 6.98.125c.96 0 1.869.185 2.724.554.856.369 1.603.87 2.241 1.503a7.027 7.027 0 0 1 1.512 2.232c.37.856.554 1.77.554 2.742 0 .856-.147 1.667-.44 2.435a7.299 7.299 0 0 1-1.195 2.065l5.467 5.502zM6.979 13.08c.808 0 1.573-.155 2.293-.466a5.9 5.9 0 0 0 1.881-1.274 6.11 6.11 0 0 0 1.266-1.881c.31-.715.466-1.482.466-2.303 0-.82-.156-1.588-.466-2.302a6.11 6.11 0 0 0-1.266-1.881 5.9 5.9 0 0 0-1.88-1.275 5.735 5.735 0 0 0-2.294-.466c-.82 0-1.591.156-2.312.466a5.9 5.9 0 0 0-1.88 1.275 6.11 6.11 0 0 0-1.266 1.88 5.716 5.716 0 0 0-.466 2.303c0 .82.155 1.588.466 2.303a6.11 6.11 0 0 0 1.265 1.88 5.9 5.9 0 0 0 1.881 1.275c.72.31 1.491.466 2.312.466z" fill="currentColor" fill-rule="evenodd"/>
29+
</svg>
2730
<span class="visually-hidden">Search</span>
2831
</button>
2932
</div>

‎src/components/SearchResult.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
<div class="search-result__title">{{ title || funTitle }}</div>
77
</RouterLink>
88
<RouterLink v-if="isStaff" :to="{ name: 'OrgchartHighlight', params: { username: username } }" class="search-result__orgchart-link">
9-
<img src="@/assets/images/org-chart.svg" width="20" alt="" aria-hidden="true" role="presentation" />
9+
<svg width="22" height="22" viewport="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="presentation">
10+
<path d="M11.5 12a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 2a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm7 8a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.5 7a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3 7h1v1H3V7zm0 2h1v1H3V9zm1 3h-.5a.5.5 0 0 1-.5-.5V11h1v1zm1 0v-1h1v1H5zm2 0v-1h1v1H7zm4 2h1v1h-1v-1zm0 2h1v1h-1v-1zm1 3h-.5a.5.5 0 0 1-.5-.5V18h1v1zm1 0v-1h1v1h-1z" fill="currentColor" fill-rule="nonzero" />
11+
</svg>
1012
<span class="visually-hidden">View {{ username }} in org chart</span>
1113
</RouterLink>
1214
</li>
@@ -87,6 +89,7 @@ export default {
8789
line-height: 1; /* avoid extra space underneath image */
8890
border-radius: var(--imageRadius);
8991
padding: .72em;
92+
color: var(--black);
9093
}
9194
.search-result__orgchart-link:hover {
9295
background-color: var(--gray-20);

‎src/components/TopBar.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@
1111
<img src="@/assets/images/search.svg" alt="" role="presentation" aria-hidden="true" width="20" />
1212
</template>
1313
</ShowMore>
14-
<RouterLink :to="{ name: 'Orgchart' }" class="top-bar__link" exact-active-class="top-bar__link--current"><img src="@/assets/images/org-chart.svg" alt="Org chart" width="20" title="Org chart" /></RouterLink>
14+
<RouterLink :to="{ name: 'Orgchart' }" class="top-bar__link" exact-active-class="top-bar__link--current">
15+
<svg width="22" height="22" viewport="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="org=chart-link-icon-title">
16+
<title id="org-chart-link-icon-title">Org chart</title>
17+
<path d="M11.5 12a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 2a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm7 8a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.5 7a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3 7h1v1H3V7zm0 2h1v1H3V9zm1 3h-.5a.5.5 0 0 1-.5-.5V11h1v1zm1 0v-1h1v1H5zm2 0v-1h1v1H7zm4 2h1v1h-1v-1zm0 2h1v1h-1v-1zm1 3h-.5a.5.5 0 0 1-.5-.5V18h1v1zm1 0v-1h1v1h-1z" fill="currentColor" fill-rule="nonzero" />
18+
</svg>
19+
</RouterLink>
1520
<ApolloQuery :query="profileQuery">
1621
<template slot-scope="{ result: { loading, data, error } }">
1722
<template v-if="data">

‎src/main.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import VueApollo from 'vue-apollo';
44
import AsyncComputed from 'vue-async-computed';
55
import App from './App.vue';
66
import router from './router';
7-
import store from './store';
87

98
const client = new ApolloClient({
109
uri: '/api/v3/graphql/',
@@ -25,7 +24,6 @@ Vue.use(AsyncComputed);
2524

2625
new Vue({
2726
router,
28-
store,
2927
provide: apolloProvider.provide(),
3028
render: h => h(App),
3129
}).$mount('#app');

‎src/store.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/views/PageOrgchart.vue‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<OrgRoot v-if="loose && !loading" :roots="loose" :trace="looseTrace || ''" heading="People who need their manager set" modifier="org-root--loose"></OrgRoot>
66
<LoadingSpinner v-else></LoadingSpinner>
77
</div>
8-
<ApolloQuery v-if="username" :query="previewProfileQuery" :variables="{ username }" :tag="null">
8+
<ApolloQuery v-if="username && (desktopView || openedFromOrgNode)" :query="previewProfileQuery" :variables="{ username }" :tag="null">
99
<template slot-scope="{ result: { loading, data, error } }">
1010
<div class="org-chart__preview">
1111
<template v-if="data">
@@ -46,6 +46,7 @@ export default {
4646
trace: '',
4747
looseTrace: '',
4848
previewProfileQuery: PREVIEW_PROFILE,
49+
desktopView: false,
4950
};
5051
},
5152
created() {
@@ -81,12 +82,12 @@ export default {
8182
username() {
8283
return this.$route.params.username;
8384
},
84-
desktopView() {
85-
return this.$store.state.profilePreview.desktopView;
85+
openedFromOrgNode() {
86+
return this.$route.params.openedFromOrgNode;
8687
},
8788
},
8889
watch: {
89-
desktopView: function toggleModal() {
90+
desktopView() {
9091
if (this.modalEl && this.desktopView === true) {
9192
this.modalEl.isOpen = true;
9293
}
@@ -113,15 +114,9 @@ export default {
113114
},
114115
updateView() {
115116
if (matchMedia('(min-width: 57.5em)').matches) {
116-
if (this.$store.state.profilePreview.desktopView !== true) {
117-
this.$store.commit('toggleProfilePreviewDesktopView', {
118-
desktopView: true,
119-
});
120-
}
121-
} else if (this.$store.state.profilePreview.desktopView !== false) {
122-
this.$store.commit('toggleProfilePreviewDesktopView', {
123-
desktopView: false,
124-
});
117+
this.desktopView = true;
118+
} else {
119+
this.desktopView = false;
125120
}
126121
},
127122
},

0 commit comments

Comments
 (0)