mirror of
https://github.com/godotengine/godot-team-reports.git
synced 2025-12-31 13:48:17 +03:00
Add mobile design with button to hide/show the teams list
This commit is contained in:
Hana
Yuri Sizov
@@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -10,7 +10,7 @@ export default class PullRequestItem extends LitElement {
|
||||
--draft-font-color: #ffcc31;
|
||||
--draft-background-color: #9db3c0;
|
||||
--stats-background-color: #f9fafa;
|
||||
|
||||
|
||||
--stat-temp0-color: #000000;
|
||||
--stat-temp1-color: #383824;
|
||||
--stat-temp2-color: #645b2c;
|
||||
@@ -41,14 +41,14 @@ export default class PullRequestItem extends LitElement {
|
||||
--stat-temp9-color: #d3001c;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** Component styling **/
|
||||
:host {
|
||||
border-bottom: 3px solid var(--pr-border-color);
|
||||
display: block;
|
||||
padding: 14px 12px 20px 12px;
|
||||
}
|
||||
|
||||
|
||||
:host a {
|
||||
color: var(--link-font-color);
|
||||
text-decoration: none;
|
||||
@@ -56,7 +56,7 @@ export default class PullRequestItem extends LitElement {
|
||||
:host a:hover {
|
||||
color: var(--link-font-color-hover);
|
||||
}
|
||||
|
||||
|
||||
:host .pr-title {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
@@ -65,8 +65,9 @@ export default class PullRequestItem extends LitElement {
|
||||
}
|
||||
:host .pr-title-name {
|
||||
color: var(--g-font-color);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-title-draft {
|
||||
background-color: var(--draft-background-color);
|
||||
border-radius: 6px 6px;
|
||||
@@ -75,7 +76,7 @@ export default class PullRequestItem extends LitElement {
|
||||
padding: 1px 6px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-meta {
|
||||
color: var(--dimmed-font-color);
|
||||
display: flex;
|
||||
@@ -83,14 +84,14 @@ export default class PullRequestItem extends LitElement {
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-labels {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
padding: 4px 0;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-label {
|
||||
padding-right: 8px;
|
||||
}
|
||||
@@ -101,43 +102,43 @@ export default class PullRequestItem extends LitElement {
|
||||
height: 8px;
|
||||
}
|
||||
:host .pr-label-name {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
:host .pr-milestone-value {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-time {
|
||||
|
||||
|
||||
}
|
||||
:host .pr-time-value {
|
||||
border-bottom: 1px dashed var(--g-font-color);
|
||||
cursor: help;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-author {
|
||||
|
||||
|
||||
}
|
||||
:host .pr-author-value {
|
||||
|
||||
|
||||
}
|
||||
:host .pr-author-value--hot:before {
|
||||
content: "★";
|
||||
color: var(--draft-font-color);
|
||||
}
|
||||
|
||||
|
||||
:host .pr-links {
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-link {
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-stats {
|
||||
background-color: var(--stats-background-color);
|
||||
border-radius: 4px;
|
||||
@@ -146,11 +147,11 @@ export default class PullRequestItem extends LitElement {
|
||||
padding: 10px 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-stat + .pr-stat {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-stat--temp0 {
|
||||
color: var(--stat-temp0-color);
|
||||
}
|
||||
@@ -186,7 +187,7 @@ export default class PullRequestItem extends LitElement {
|
||||
color: var(--stat-temp9-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-review {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -197,7 +198,7 @@ export default class PullRequestItem extends LitElement {
|
||||
:host .pr-review-teams {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
|
||||
:host .pr-review-team {
|
||||
color: var(--light-font-color);
|
||||
white-space: nowrap;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -264,7 +278,7 @@ export default class PullRequestItem extends LitElement {
|
||||
` : '')}
|
||||
<span class="pr-title-id">#${this.id}</span> <span class="pr-title-name">${this.title}</span>
|
||||
</a>
|
||||
|
||||
|
||||
<div class="pr-meta">
|
||||
<div class="pr-labels">
|
||||
${this.labels.map((item) => {
|
||||
@@ -285,7 +299,7 @@ export default class PullRequestItem extends LitElement {
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pr-milestone">
|
||||
<div>
|
||||
<span>milestone: </span>
|
||||
@@ -307,7 +321,7 @@ export default class PullRequestItem extends LitElement {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pr-timing">
|
||||
<div class="pr-time">
|
||||
<span>created: </span>
|
||||
@@ -340,7 +354,7 @@ export default class PullRequestItem extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
${(this.links.length > 0 ? html`
|
||||
<div class="pr-links">
|
||||
<span>linked issues: </span>
|
||||
@@ -349,7 +363,7 @@ export default class PullRequestItem extends LitElement {
|
||||
if (item.repo !== "godotengine/godot") {
|
||||
issueRef = item.repo + issueRef;
|
||||
}
|
||||
|
||||
|
||||
return html`
|
||||
${(index > 0 ? html`
|
||||
<span> · </span>
|
||||
@@ -366,7 +380,7 @@ export default class PullRequestItem extends LitElement {
|
||||
})}
|
||||
</div>
|
||||
` : '')}
|
||||
|
||||
|
||||
<div class="pr-stats">
|
||||
<div
|
||||
class="pr-stat"
|
||||
@@ -391,7 +405,7 @@ export default class PullRequestItem extends LitElement {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pr-review">
|
||||
<div class="pr-review-teams">
|
||||
${(other_teams.length > 0) ? html`
|
||||
@@ -410,7 +424,7 @@ export default class PullRequestItem extends LitElement {
|
||||
target="_blank"
|
||||
>
|
||||
diff
|
||||
</a> |
|
||||
</a> |
|
||||
<a
|
||||
href="${this.patch_url}"
|
||||
target="_blank"
|
||||
@@ -418,7 +432,7 @@ export default class PullRequestItem extends LitElement {
|
||||
patch
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -17,17 +17,17 @@ export default class PullRequestList extends LitElement {
|
||||
--pulls-toolbar-color: #222c3d;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** Component styling **/
|
||||
:host {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
:host input[type=checkbox] {
|
||||
margin: 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
||||
:host select {
|
||||
background: var(--pulls-background-color);
|
||||
border: 1px solid var(--pulls-background-color);
|
||||
@@ -36,7 +36,7 @@ export default class PullRequestList extends LitElement {
|
||||
outline: none;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
|
||||
:host .team-pulls {
|
||||
background-color: var(--pulls-background-color);
|
||||
border-radius: 0 4px 4px 0;
|
||||
@@ -44,7 +44,7 @@ export default class PullRequestList extends LitElement {
|
||||
max-width: 760px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
|
||||
:host .team-pulls-toolbar {
|
||||
background: var(--pulls-toolbar-color);
|
||||
border-radius: 4px;
|
||||
@@ -55,9 +55,9 @@ export default class PullRequestList extends LitElement {
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
|
||||
:host .pulls-count {
|
||||
|
||||
|
||||
}
|
||||
:host .pulls-count strong {
|
||||
font-size: 18px;
|
||||
@@ -79,21 +79,21 @@ export default class PullRequestList extends LitElement {
|
||||
:host .pulls-filters-column + .pulls-filters-column {
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
|
||||
:host .pulls-filter {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
|
||||
:host .pulls-sort {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
|
||||
:host .pulls-sort-action {
|
||||
color: var(--link-font-color);
|
||||
cursor: pointer;
|
||||
@@ -101,13 +101,29 @@ export default class PullRequestList extends LitElement {
|
||||
:host .pulls-sort-action:hover {
|
||||
color: var(--link-font-color-hover);
|
||||
}
|
||||
|
||||
|
||||
:host .pulls-sort-action--active,
|
||||
:host .pulls-sort-action--active:hover {
|
||||
color: var(--link-font-color-inactive);
|
||||
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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -199,7 +215,7 @@ export default class PullRequestList extends LitElement {
|
||||
` : ''
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pulls-filters">
|
||||
<span class="pulls-filters-column">
|
||||
<span class="pulls-filter">
|
||||
@@ -210,15 +226,15 @@ export default class PullRequestList extends LitElement {
|
||||
@click="${this.onDraftsChecked}"
|
||||
/>
|
||||
</span>
|
||||
|
||||
|
||||
<span class="pulls-filter">
|
||||
<span>milestone: </span>
|
||||
<select @change="${this.onMilestoneChanged}">
|
||||
<option value="">*</option>
|
||||
${milestones.map((item) => {
|
||||
return html`
|
||||
<option
|
||||
value="${item}"
|
||||
<option
|
||||
value="${item}"
|
||||
.selected="${this._filterMilestone === item}"
|
||||
>
|
||||
${item}
|
||||
@@ -272,16 +288,16 @@ export default class PullRequestList extends LitElement {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
${pulls.map((item) => {
|
||||
const other_teams = [];
|
||||
item.teams.forEach((teamId) => {
|
||||
if (teamId === -1) {
|
||||
return; // continue
|
||||
}
|
||||
|
||||
|
||||
if (
|
||||
this.selected_is_person
|
||||
this.selected_is_person
|
||||
|| (!this.selected_is_person && teamId !== this.selected_group)
|
||||
) {
|
||||
other_teams.push(
|
||||
@@ -289,7 +305,7 @@ export default class PullRequestList extends LitElement {
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
let author = null;
|
||||
if (typeof this.authors[item.authored_by] != "undefined") {
|
||||
author = this.authors[item.authored_by];
|
||||
@@ -313,7 +329,7 @@ export default class PullRequestList extends LitElement {
|
||||
|
||||
.diff_url="${item.diff_url}"
|
||||
.patch_url="${item.patch_url}"
|
||||
|
||||
|
||||
.teams="${other_teams}"
|
||||
/>
|
||||
`;
|
||||
|
||||
@@ -11,15 +11,17 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** Component styling **/
|
||||
:host {
|
||||
}
|
||||
@@ -43,7 +45,7 @@ export default class TeamList extends LitElement {
|
||||
:host .team-list-title--active {
|
||||
border-bottom: 3px solid var(--section-active-border-color);
|
||||
}
|
||||
|
||||
|
||||
:host .team-list-section {
|
||||
display: none;
|
||||
}
|
||||
@@ -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`
|
||||
@@ -155,7 +203,7 @@ export default class TeamList extends LitElement {
|
||||
`
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="${reviewersClassList.join(" ")}">
|
||||
${(this.reviewers.length > 0) ?
|
||||
this.reviewers.map((item) => {
|
||||
@@ -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`
|
||||
|
||||
@@ -18,15 +18,21 @@ export default class EntryComponent extends LitElement {
|
||||
:host {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** Component styling **/
|
||||
:host {
|
||||
}
|
||||
|
||||
|
||||
:host .teams {
|
||||
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);
|
||||
}
|
||||
});
|
||||
@@ -169,7 +175,7 @@ export default class EntryComponent extends LitElement {
|
||||
<page-content>
|
||||
<gr-index-entry .generated_at="${this._generatedAt}"></gr-index-entry>
|
||||
<gr-index-description></gr-index-description>
|
||||
|
||||
|
||||
${(this._isLoading ? html`
|
||||
<h3>Loading...</h3>
|
||||
` : html`
|
||||
@@ -181,11 +187,11 @@ export default class EntryComponent extends LitElement {
|
||||
.selected_is_person="${this._selectedIsPerson}"
|
||||
@tabclick="${this.onTabClicked}"
|
||||
></gr-team-list>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user