<app-mat-spinner-overlay *ngIf="isLoading"
[overlay]="true"></app-mat-spinner-overlay>
<ars-screen ars-flex-box
class="questionwall-screen">
<ars-row [height]="50"
class="questionwall-header">
<ars-style-btn-material *ngIf="room"
style="width:100%;height:100%;"
ars-flex-box>
<ars-fill ars-flex-box>
<ars-col ars-btn-wrp
[xp]="16"
[yp]="0"
[extra]="true">
<button ars-btn
(click)="leave()"
matRipple
aria-labelledby="back-lbl">
<i>arrow_back</i>
</button>
</ars-col>
</ars-fill>
<ng-container *ngIf="room &&
room.questionsBlocked &&
!router.url.includes('/room-list/')">
<mat-icon *ngif="!router.url.endsWith('/questionwall')">block</mat-icon>
<h2>{{'question-wall.questions-blocked'|translate}}</h2>
</ng-container>
<ars-col>
<!-- centered col -->
</ars-col>
<ars-fill ars-flex-box>
<ars-fill></ars-fill>
<ars-col ars-btn-wrp
[xp]="16"
[extra]="true">
<mat-menu #sortMenu>
<button mat-menu-item
(click)="sortTime(true)"
aria-labelledby="sort-lbl-new">{{'question-wall.sort-new' | translate}}</button>
<button mat-menu-item
(click)="sortTime()"
aria-labelledby="sort-lbl-old">{{'question-wall.sort-old' | translate}}</button>
<button mat-menu-item
(click)="sortScore(true)"
aria-labelledby="sort-lbl-rating">{{'question-wall.sort-score' | translate}}</button>
</mat-menu>
<mat-menu #filterMenu>
<button mat-menu-item
(click)="filterFavorites()"
aria-labelledby="filter-lbl-favorites"
class="selection">
<mat-icon class="star">grade</mat-icon>
<span>{{'question-wall.filter-favorite' | translate}}</span>
</button>
<button mat-menu-item
(click)="filterBookmark()"
aria-labelledby="filter-lbl-bookmark"
class="selection">
<mat-icon>bookmark</mat-icon>
<span>{{'question-wall.filter-bookmark' | translate}}</span>
</button>
</mat-menu>
<mat-menu #filterTagMenu>
<button mat-menu-item
*ngFor="let tag of tags"
(click)="filterTag(tag)"
class="selection">
<span>{{tag}}</span>
</button>
</mat-menu>
<mat-menu #timeMenu="matMenu"
xPosition="before">
<div *ngFor="let periodItem of periodsList">
<button mat-menu-item
(click)="setTimePeriod(periodItem)"
class="period selection"
[ngClass]="{'selected': periodItem === period}"
aria-labelledby="{{periodItem}}">
<span>{{ ('comment-list.select-'+periodItem) | translate }}</span>
</button>
</div>
</mat-menu>
<button ars-btn
class="pseudo-button"
[ngClass]="{'selected': hasFilter || period !== 'time-all'}"
matRipple
matTooltip="{{'question-wall.overview-question-tooltip' | translate}}">
<i>comment</i>
<p style="margin-left: 0.25em;">{{commentsCountQuestions}}</p>
</button>
<button ars-btn
class="pseudo-button"
[ngClass]="{'selected': hasFilter || period !== 'time-all'}"
matRipple
matTooltip="{{'question-wall.overview-questioners-tooltip' | translate}}">
<i>person</i>
<p style="margin-left: 0.25em;">{{commentsCountUsers}}</p>
</button>
<button ars-btn
[mat-menu-trigger-for]="sortMenu"
matRipple
aria-labelledby="sort-lbl">
<i>sort</i>
<p>{{'question-wall.sort' | translate}}</p>
</button>
<button ars-btn
[mat-menu-trigger-for]="timeMenu"
[ngClass]="{'selected': period !== 'time-all'}"
matRipple
aria-labelledby="filter-time">
<i>history</i>
<p>{{'question-wall.time-period' | translate}}</p>
</button>
<button ars-btn
[mat-menu-trigger-for]="filterMenu"
[ngClass]="{'selected': hasFilter &&
(filterTitle === 'question-wall.filter-favorite' ||
filterTitle === 'question-wall.filter-bookmark')}"
matRipple
aria-labelledby="filter-lbl">
<i>filter_list</i>
<p>Filter</p>
</button>
<button ars-btn
[disabled]="tags.length==0"
[mat-menu-trigger-for]="filterTagMenu"
[ngClass]="{'selected': hasFilter && filterTitle === '' && filterDesc !== ''}"
matRipple
aria-labelledby="filter-tags-lbl">
<mat-icon class="icon-svg"
svgIcon="comment_tag"></mat-icon>
<p>{{'question-wall.filter-tag' | translate}}</p>
</button>
<button ars-btn
(click)="openUserMap()"
[ngClass]="{'selected': hasFilter && filterTitle === 'question-wall.filter-user'}"
matRipple
aria-labelledby="user-lbl">
<i>person_pin_circle</i>
<p>{{'question-wall.filter-user'| translate}}</p>
</button>
</ars-col>
</ars-fill>
</ars-style-btn-material>
</ars-row>
<ars-fill ars-flex-box>
<ars-fill style="overflow:hidden;"
ars-flex-box>
<ars-fill>
</ars-fill>
<ars-row ars-flex-box
height="400">
<ars-fill></ars-fill>
<ars-col ars-flex-box>
<ars-row *ngIf="commentFocus">
<p class="questionwall-present-meta-number">{{commentFocus.comment.number}}</p>
</ars-row>
<ars-fill></ars-fill>
</ars-col>
</ars-row>
<ars-row class="questionwall-present-box-outer"
style="margin-top:-400px;">
<div class="questionwall-present-box-inner">
<ng-container *ngIf="commentFocus">
<ars-row class="questionwall-present-meta">
<i class="questionwall-icon questionwall-present-meta-icon">person_pin_circle</i>
<h2 class="questionwall-present-meta-user">{{commentFocus.comment.userNumber}}</h2>
<h2 class="questionwall-present-meta-timestamp">{{commentFocus.timeAgo}}</h2>
</ars-row>
<ars-row>
<ars-row class="bound"
style="padding:16px 32px 16px 32px;box-sizing:border-box;max-width:100%;">
<app-view-comment-data [ngStyle]="{'font-size':fontSize+'%'}"
class="questionwall-present-markdown images"
[currentData]="commentFocus.comment.body"></app-view-comment-data>
</ars-row>
</ars-row>
<ars-row [height]="50">
<ars-style-btn-material style="width:100%;height:100%;"
ars-flex-box>
<ars-col ars-btn-wrp
[xp]="32"
*ngIf="user && commentFocus.comment.creatorId !== user.id"
[extra]="true"
class="questionwall-comment-btn">
<button ars-btn
(click)="likeComment(commentFocus)"
matRipple>
<i>thumb_up</i>
<p style="padding-left:22px;">{{commentFocus.comment.upvotes}}</p>
</button>
<button ars-btn
(click)="dislikeComment(commentFocus)"
matRipple>
<i>thumb_down</i>
<p style="padding-left:22px;">{{commentFocus.comment.downvotes}}</p>
</button>
</ars-col>
<ars-fill></ars-fill>
<ars-col ars-btn-wrp
[xp]="32"
[extra]="true"
*ngIf="commentFocus.comment.tag">
<button ars-btn
matRipple
(click)="filterTag(commentFocus.comment.tag);">
<mat-icon class="icon-svg"
svgIcon="comment_tag"></mat-icon>
<p>{{commentFocus.comment.tag}}</p>
</button>
</ars-col>
</ars-style-btn-material>
</ars-row>
</ng-container>
<ng-container *ngIf="!commentFocus">
<p class="questionwall-present-introduction-title">{{'question-wall.intro-title' | translate}}</p>
<p class="questionwall-present-introduction-desc">{{'question-wall.intro-desc' | translate}}</p>
<p class="questionwall-present-introduction-desc">{{'question-wall.intro-autofocus' | translate}}</p>
</ng-container>
</div>
</ars-row>
<ars-fill>
</ars-fill>
</ars-fill>
<div class="questionwall-present-options-outer">
<div class="questionwall-present-options-inner"
ars-flex-box>
<ars-col class="flex-column-center">
<mat-icon class="icon-color">zoom_out</mat-icon>
</ars-col>
<mat-slider class="questionwall-present-options-slider"
min="100"
max="400"
value="250"
(input)="sliderChange($event)"
aria-labelledby="slider-lbl">
</mat-slider>
<ars-col class="flex-column-center">
<mat-icon class="icon-color">zoom_in</mat-icon>
</ars-col>
</div>
</div>
<ars-col [width]="50" ars-flex-box>
<ars-row>
<button mat-icon-button style="margin-top:18px" (click)="toggleSideList()">
<mat-icon class="icon-color-yellow" *ngIf="sidelistExpanded" aria-describedby="side-list-off"
matTooltip="{{'question-wall.side-list-off' | translate}}">
keyboard_double_arrow_right
</mat-icon>
<mat-icon class="icon-color-yellow" *ngIf="!sidelistExpanded" aria-describedby="side-list-on"
matTooltip="{{'question-wall.side-list-on' | translate}}">
keyboard_double_arrow_left
</mat-icon>
</button>
</ars-row>
<ars-fill></ars-fill>
</ars-col>
<ars-col [width]="450" [overflow]="'hidden'" #sidelist class="side-list">
<ars-col [width]="450">
<ars-col ars-flex-box
[width]="450"
class="questionwall-list"
#colComponent>
<ars-row>
<ars-row *ngIf="hasFilter"
class="questionwall-list-border-bottom"
[height]="50">
<ars-style-btn-material style="width:100%;height:100%;"
ars-flex-box>
<ars-col ars-btn-wrp
[xp]="48">
<button ars-btn
matRipple>
<mat-icon *ngIf="isSvgIcon"
class="icon-svg"
[svgIcon]="filterIcon"></mat-icon>
<i *ngIf="!isSvgIcon">{{filterIcon}}</i>
<p>{{filterTitle | translate}} {{filterDesc}}</p>
</button>
</ars-col>
<ars-fill></ars-fill>
<ars-col ars-btn-wrp
[xp]="48">
<button ars-btn
(click)="deactivateFilter()"
matRipple>
<i>remove_circle</i>
<p>{{'question-wall.filter-remove' | translate}}</p>
</button>
</ars-col>
</ars-style-btn-material>
</ars-row>
</ars-row>
<ars-fill class="questionwall-list-comments">
<ars-row *ngIf="!userSelection">
<ars-fill *ngIf="(hasFilter?commentsFilter:commentsFilteredByTime).length==0"
style="float:left;">
<p class="questionwall-present-introduction-desc">
{{'question-wall.no-result' | translate}}
</p>
</ars-fill>
<ars-row *ngFor="let comment of hasFilter?commentsFilter:commentsFilteredByTime"
class="questionwall-comment-anchor"
style="float:left;">
<ars-row ars-flex-box
height="170">
<ars-fill></ars-fill>
<ars-col ars-flex-box>
<ars-fill></ars-fill>
<ars-row>
<p class="questionwall-comment-number">{{comment.comment.number}}</p>
</ars-row>
<ars-fill></ars-fill>
</ars-col>
</ars-row>
<ars-row style="box-sizing:border-box;padding:8px;margin-top:-170px;">
<ars-row
[ngClass]="comment===commentFocus?'questionwall-comment-border-on':'questionwall-comment-border-off'"
style="border-radius:5px">
<ars-row ars-flex-box
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:16px;cursor:pointer">
<ars-col class="questionwall-comment-meta">
<i class="questionwall-icon">person_pin_circle</i>
<p (click)="filterUser(comment);"
class="questionwall-comment-user"
matRipple>{{comment.comment.userNumber}}</p>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
</ars-col>
<ars-col>
<p class="questionwall-comment-notification">{{comment.old?'':'NEW'}}</p>
</ars-col>
</ars-row>
<ars-row
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:0 16px;cursor:pointer">
<p class="questionwall-comment-body">
<app-view-comment-data class="images"
[currentData]="comment.comment.body"></app-view-comment-data>
</p>
</ars-row>
<ars-row [height]="50">
<ars-style-btn-material style="width:100%;height:100%;"
ars-flex-box>
<ars-col ars-btn-wrp
[xp]="16"
[extra]="true"
*ngIf="user && comment.comment.creatorId !== user.id"
class="questionwall-comment-btn">
<button ars-btn
(click)="likeComment(comment)"
matRipple>
<i>thumb_up</i>
<p style="padding-left:4px;">{{comment.comment.upvotes}}</p>
</button>
<button ars-btn
(click)="dislikeComment(comment)"
matRipple>
<i>thumb_down</i>
<p style="padding-left:4px;">{{comment.comment.downvotes}}</p>
</button>
</ars-col>
<ars-fill (click)="focusComment(comment)"
style="cursor:pointer"></ars-fill>
<ars-col ars-btn-wrp
[xp]="16"
[extra]="true"
*ngIf="comment.comment.tag">
<button ars-btn
(click)="filterTag(comment.comment.tag);"
matRipple>
<mat-icon class="icon-svg"
svgIcon="comment_tag"></mat-icon>
<p>{{comment.comment.tag}}</p>
</button>
</ars-col>
</ars-style-btn-material>
</ars-row>
</ars-row>
</ars-row>
</ars-row>
</ars-row>
<ars-row *ngIf="userSelection">
<ars-style-btn-material style="width:100%">
<ars-row [height]="50"
ars-flex-box
class="questionwall-list-border-bottom">
<ars-col ars-btn-wrp
[xp]="24"
[extra]="true">
<button ars-btn
(click)="cancelUserMap()"
matRipple>
<i>arrow_back</i>
</button>
</ars-col>
<ars-col ars-btn-wrp
[xp]="24"
[extra]="true">
<button ars-btn
class="pseudo-button">
<i>person_pin_circle</i>
<p>{{'question-wall.filter-user' | translate}}</p>
</button>
</ars-col>
</ars-row>
<ars-row ars-btn-wrp
[xp]="48"
[yp]="32">
<button ars-btn
disabled
class="questionwall-list-border-bottom pseudo-button">
<p>{{'question-wall.filter-user' | translate}}-ID</p>
<p>{{'question-wall.filter-user-count' | translate}}</p>
</button>
<button ars-btn
mat-ripple
*ngFor="let user of userList"
(click)="applyUserMap(user[1])">
<p>{{user[1]}}</p>
<p>{{user[0]}}</p>
</button>
</ars-row>
</ars-style-btn-material>
</ars-row>
</ars-fill>
</ars-col>
</ars-col>
</ars-col>
</ars-fill>
<ars-row [height]="50"
class="questionwall-footer">
<ars-style-btn-material style="width:100%;"
ars-flex-box>
<ars-col ars-btn-wrp
[xp]="16"
[extra]="true">
<button ars-btn
(click)="toggleFocusIncommingComments()"
matRipple
aria-labelledby="autofocus-on-lbl">
<ng-container *ngIf="focusIncommingComments">
<i>{{'question-wall.auto-renew-off-icon' | translate}}</i>
<p>{{'question-wall.auto-renew-off' | translate}}</p>
</ng-container>
<ng-container *ngIf="!focusIncommingComments">
<i>{{'question-wall.auto-renew-on-icon' | translate}}</i>
<p>{{'question-wall.auto-renew-on' | translate}}</p>
</ng-container>
</button>
<button ars-btn
matRipple
(click)="toggleQRCode()">
<ng-container *ngIf="qrCodeExpanded">
<i>qr_code</i>
<p>{{'question-wall.qrCodeExpanded-off' | translate}}</p>
</ng-container>
<ng-container *ngIf="!qrCodeExpanded">
<i>qr_code</i>
<p>{{'question-wall.qrCodeExpanded-on' | translate}}</p>
</ng-container>
</button>
</ars-col>
<ars-fill></ars-fill>
<ars-col style="display:flex;flex-direction:column;justify-content:center">
<p *ngIf="unreadComments"
style="line-height:18px;"
class="questionwall-text-color">{{unreadComments}}</p>
</ars-col>
<ars-col ars-btn-wrp
[xp]="16"
[extra]="true">
<button ars-btn
(click)="prevComment()"
matRipple
aria-labelledby="prev-comment-lbl">
<i>{{'question-wall.prev-comment-icon' | translate}}</i>
<p>{{'question-wall.prev-comment' | translate}}</p>
</button>
<button ars-btn
(click)="nextComment()"
matRipple
aria-labelledby="next-comment-lbl">
<i>{{'question-wall.next-comment-icon' | translate}}</i>
<p>{{'question-wall.next-comment' | translate}}</p>
</button>
</ars-col>
</ars-style-btn-material>
</ars-row>
<app-active-user *ngIf="room"
[room]="room"
[iconColor]="'#FFFFFF'"
[backgroundColor]="'#FFFFFF'"
[foregroundColor]="'#000000'"></app-active-user>
<div class="qr-overlay" *ngIf="qrCodeExpanded">
<qrcode [qrdata]="getURL()" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
</div>
</ars-screen>
<div class="visually-hidden">
<div id="side-list-off">{{'question-wall.side-list-off' | translate}}</div>
<div id="side-list-on">{{'question-wall.side-list-on' | translate}}</div>
<div id="back-lbl">{{'question-wall.back-lbl' | translate}}</div>
<div id="sort-lbl">{{'question-wall.sort-lbl' | translate}}</div>
<div id="sort-lbl-new">{{'question-wall.sort-lbl-new' | translate}}</div>
<div id="sort-lbl-old">{{'question-wall.sort-lbl-old' | translate}}</div>
<div id="sort-lbl-rating">{{'question-wall.sort-lbl-rating' | translate}}</div>
<div id="filter-lbl">{{'question-wall.filter-lbl' | translate}}</div>
<div id="filter-time">{{'question-wall.filter-time' | translate}}</div>
<div id="filter-lbl-favorites">{{'question-wall.filter-lbl-favorites' | translate}}</div>
<div id="filter-lbl-approved">{{'question-wall.filter-lbl-approved' | translate}}</div>
<div id="filter-lbl-disapproved">{{'question-wall.filter-lbl-disapproved' | translate}}</div>
<div id="filter-tags-lbl">{{'question-wall.filter-tags-lbl' | translate}}</div>
<div id="user-lbl">{{'question-wall.user-lbl' | translate}}</div>
<div id="slider-lbl">{{'question-wall.slider-lbl' | translate}}</div>
<div id="autofocus-off-lbl">{{'question-wall.autofocus-off-lbl' | translate}}</div>
<div id="autofocus-on-lbl">{{'question-wall.autofocus-on-lbl' | translate}}</div>
<div id="prev-comment-lbl">{{'question-wall.prev-comment-lbl' | translate}}</div>
<div id="next-comment-lbl">{{'question-wall.next-comment-lbl' | translate}}</div>
<div id="style-blue-label">{{'footer.style-blue' | translate}}</div>
</div>