godotengine/godot-team-reports
1
0
Fork 0
mirror of https://github.com/godotengine/godot-team-reports.git synced 2026-09-03 23:39:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add mobile design with button to hide/show the teams list

Browse Source
This commit is contained in:
Hana
2022-07-13 00:01:35 +03:00
committed by Yuri Sizov
parent 66204be8e2
commit 102bbabc87
7 changed files with 199 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/paths/index/components/IndexDescription.js
View File

@@ -44,6 +44,21 @@ export default class IndexDescription extends LitElement {
border-top: 1px solid var(--g-background-extra-color);
width: 30%;
}
@media only screen and (max-width: 900px) {
:host .header-description {
padding: 0 8px;
flex-direction: column;
}
:host .header-description-column {
width: 100%;
}
:host .header-description-column.header-extra-links {
text-align: center;
padding-top: 12px;
}
}
`;
}

17
src/paths/index/components/IndexHeader.js
View File

@@ -35,6 +35,21 @@ export default class IndexHeader extends LitElement {
:host .header-metadata a:hover {
color: var(--link-font-color-hover);
}
@media only screen and (max-width: 900px) {
:host .header {
flex-wrap: wrap;
text-align: center;
}
:host .header-title,
:host .header-metadata {
width: 100%;
}
:host .header-metadata {
padding-bottom: 12px;
text-align: center;
}
}
`;
}
@@ -78,7 +93,7 @@ export default class IndexHeader extends LitElement {
return html`
<div class="header">
<h1>
<h1 class="header-title">
Godot Team Reports
</h1>
<div class="header-metadata">

14
src/paths/index/components/prs/PullRequestItem.js
View File

@@ -65,6 +65,7 @@ export default class PullRequestItem extends LitElement {
}
:host .pr-title-name {
color: var(--g-font-color);
word-break: break-word;
}
:host .pr-title-draft {
@@ -206,6 +207,19 @@ export default class PullRequestItem extends LitElement {
content: "· ";
white-space: break-spaces;
}
@media only screen and (max-width: 900px) {
:host {
padding: 14px 0 20px 0;
}
:host .pr-meta {
flex-wrap: wrap;
}
:host .pr-labels {
width: 100%;
justify-content: space-between;
}
}
`;
}

16
src/paths/index/components/prs/PullRequestList.js
View File

@@ -108,6 +108,22 @@ export default class PullRequestList extends LitElement {
cursor: default;
text-decoration: underline;
}
@media only screen and (max-width: 900px) {
:host .team-pulls {
padding: 8px;
}
:host .pulls-count {
margin-bottom: 12px;
}
:host .team-pulls-toolbar {
flex-wrap: wrap;
}
:host .pulls-filters {
width: 100%;
justify-content: space-between;
}
}
`;
}

66
src/paths/index/components/teams/TeamList.js
View File

@@ -11,12 +11,14 @@ export default class TeamList extends LitElement {
--teams-background-color: #fcfcfa;
--teams-border-color: #515c6c;
--section-active-border-color: #397adf;
--teams-mobile-color: #9bbaed;
}
@media (prefers-color-scheme: dark) {
:host {
--teams-background-color: #0d1117;
--teams-border-color: #515c6c;
--section-active-border-color: #397adf;
--teams-mobile-color: #222c3d;
}
}
@@ -59,18 +61,52 @@ export default class TeamList extends LitElement {
width: 4px;
vertical-align: super;
}
:host .team-mobile-container {
display: none;
padding: 0 12px 24px 12px;
}
:host .team-mobile-button {
width: 100%;
padding: 12px 0;
margin: 0;
border: none;
border-radius: 4px;
background: var(--teams-mobile-color);
text-align: center;
cursor: pointer;
}
@media only screen and (max-width: 900px) {
:host {
width: 100%
}
:host .team-list {
display: none;
width: 100% !important;
}
:host .team-mobile-container,
:host .team-list.team-list--active {
display: block !important;
}
}
`;
}
@property({ type: Array }) teams = [];
@property({ type: Array }) reviewers = [];
@property({ type: Number }) selected = -1;
@property({ type: Number }) selected = {};
@property({ type: Boolean }) selected_is_person = false;
constructor() {
super();
this._currentSection = "teams";
this._mobileActive = false;
}
onMobileClicked() {
this._mobileActive = !this._mobileActive;
this.requestUpdate();
}
onSwitcherClicked(switchTo, event) {
@@ -78,13 +114,15 @@ export default class TeamList extends LitElement {
this.requestUpdate();
}
onTabClicked(tabId, tabSlug, isPerson, event) {
onTabClicked(tab, isPerson, event) {
this.dispatchEvent(greports.util.createEvent("tabclick", {
"tabId": tabId,
"tab": tab,
"isPerson": isPerson,
}));
greports.util.setHistoryHash(tabSlug);
greports.util.setHistoryHash(tab.slug);
this._mobileActive = false;
this.requestUpdate();
}
update(changedProperties) {
@@ -120,8 +158,18 @@ export default class TeamList extends LitElement {
reviewersClassList.push("team-list-section--active");
}
const containerClassList = ["team-list"];
if (this._mobileActive) {
containerClassList.push("team-list--active");
}
return html`
<div class="team-list">
<div class="team-mobile-container">
<p class="team-mobile-button" @click="${this.onMobileClicked.bind(this)}">
${(this.selected_is_person) ? html `Reviewer : ` : html `Team : `} ${this.selected.name}
</p>
</div>
<div class="${containerClassList.join(" ")}">
<div class="team-list-switcher">
<h4
class="${teamsTitleClassList.join(" ")}"
@@ -146,8 +194,8 @@ export default class TeamList extends LitElement {
.name="${item.name}"
.avatar="${item.avatar}"
.pull_count="${item.pull_count}"
?active="${!this.selected_is_person && this.selected === item.id}"
@click="${this.onTabClicked.bind(this, item.id, item.slug, false)}"
?active="${!this.selected_is_person && this.selected.id === item.id}"
@click="${this.onTabClicked.bind(this, item, false)}"
/>
`;
}) : html`
@@ -165,8 +213,8 @@ export default class TeamList extends LitElement {
.name="${item.name}"
.avatar="${item.avatar}"
.pull_count="${item.pull_count}"
?active="${this.selected_is_person && this.selected === item.id}"
@click="${this.onTabClicked.bind(this, item.id, item.slug, true)}"
?active="${this.selected_is_person && this.selected.id === item.id}"
@click="${this.onTabClicked.bind(this, item, true)}"
/>
`;
}) : html`

26
src/paths/index/entry.js
View File

@@ -27,6 +27,12 @@ export default class EntryComponent extends LitElement {
display: flex;
padding: 24px 0;
}
@media only screen and (max-width: 900px) {
:host .teams {
flex-wrap: wrap;
}
}
`;
}
@@ -41,7 +47,7 @@ export default class EntryComponent extends LitElement {
this._orderedTeams = [];
this._reviewers = {};
this._orderedReviewers = [];
this._selectedGroup = -1;
this._selectedGroup = {};
this._selectedIsPerson = false;
this._authors = {};
@@ -100,7 +106,7 @@ export default class EntryComponent extends LitElement {
for (let i = 0; i < this._orderedTeams.length; i++) {
const team = this._orderedTeams[i];
if (team.slug === requested_slug) {
this._selectedGroup = team.id;
this._selectedGroup = team;
this._selectedIsPerson = false;
hasPresetGroup = true;
break;
@@ -111,7 +117,7 @@ export default class EntryComponent extends LitElement {
for (let i = 0; i < this._orderedReviewers.length; i++) {
const reviewer = this._orderedReviewers[i];
if (reviewer.slug === requested_slug) {
this._selectedGroup = reviewer.id;
this._selectedGroup = reviewer;
this._selectedIsPerson = true;
hasPresetGroup = true;
break;
@@ -123,10 +129,10 @@ export default class EntryComponent extends LitElement {
// If no team/reviewer was passed in the URL, or that team/reviewer is not available, use the first team.
if (!hasPresetGroup) {
if (this._orderedTeams.length) {
this._selectedGroup = this._orderedTeams[0].id;
this._selectedGroup = this._orderedTeams[0];
greports.util.setHistoryHash(this._orderedTeams[0].slug);
} else {
this._selectedGroup = -1;
this._selectedGroup = {};
greports.util.setHistoryHash("");
}
}
@@ -136,7 +142,7 @@ export default class EntryComponent extends LitElement {
this._orderedTeams = [];
this._reviewers = {};
this._orderedReviewers = [];
this._selectedGroup = -1;
this._selectedGroup = {};
this._selectedIsPerson = false;
this._authors = {};
this._pulls = [];
@@ -147,7 +153,7 @@ export default class EntryComponent extends LitElement {
}
onTabClicked(event) {
this._selectedGroup = event.detail.tabId;
this._selectedGroup = event.detail.tab;
this._selectedIsPerson = event.detail.isPerson;
this.requestUpdate();
@@ -157,10 +163,10 @@ export default class EntryComponent extends LitElement {
render(){
let pulls = [];
this._pulls.forEach((pull) => {
if (!this._selectedIsPerson && pull.teams.includes(this._selectedGroup)) {
if (!this._selectedIsPerson && pull.teams.includes(this._selectedGroup.id)) {
pulls.push(pull);
}
if (this._selectedIsPerson && pull.reviewers.includes(this._selectedGroup)) {
if (this._selectedIsPerson && pull.reviewers.includes(this._selectedGroup.id)) {
pulls.push(pull);
}
});
@@ -185,7 +191,7 @@ export default class EntryComponent extends LitElement {
<gr-pull-list
.pulls="${pulls}"
.teams="${this._teams}"
.selected_group="${this._selectedGroup}"
.selected_group="${this._selectedGroup.id}"
.selected_is_person="${this._selectedIsPerson}"
.authors="${this._authors}"
></gr-pull-list>

7
src/shared/components/PageContent.js
View File

@@ -4,12 +4,19 @@ import { LitElement, html, css, customElement } from 'lit-element';
export default class PageContent extends LitElement {
static get styles() {
return css`
/** Component styling **/
:host {
display: block;
margin: 0 auto;
padding: 0 12px;
max-width: 1024px;
}
@media only screen and (max-width: 900px) {
:host {
padding: 0;
}
}
`;
}