gaf-mobile
Version:
GAF mobile Web site
136 lines (125 loc) • 9.22 kB
HTML
<div class="Thread scroll-container" fl-analytics-section="Thread" fl-scrollpos="ctrl.position.scroll" fl-scrollpos-container>
<!-- Page Header -->
<header class="Thread-header section-inner" ng-if="ctrl.otherUser && ctrl.state !== 'loading'">
<div class="Thread-header-inner">
<a class="Thread-header-back" role="button" ng-click="ctrl.goToPreviousPage()" fl-analytics="BackButton">
<fl-svg class="Thread-header-icon" src="images/icons/flicon-arrow-back.svg"></fl-svg>
</a>
<div class="Thread-header-details">
<span ng-if="ctrl.threadType !== 'group'">
<a href="{{ctrl.link}}" fl-analytics="ViewProject">
<span class="Thread-header-userName">
{{ ctrl.otherUser.username }}
</span>
<!-- Clean up once AB Test is done -->
<div class="Thread-header-subDetails">
<span class="Thread-header-status online-status--withLabel" fl-online-offline-icon user-id="ctrl.otherUser.id" ng-if="ctrl.showOnlineOfflineStatus"></span>
<h1 class="Thread-header-title" ng-if="ctrl.project">{{ ctrl.project.title }}</h1>
<h1 class="Thread-header-title" ng-if="!ctrl.project && !ctrl.selectedBid">I'm available! Let's work together.</h1>
</div>
<!-- End Clean up -->
</a>
</span>
<span ng-if="ctrl.threadType === 'group'">
<a href="{{ctrl.link}}" fl-analytics="ViewProject">
<span class="Thread-header-userName">{{ ctrl.project.title }}</span>
</a>
</span>
</div>
<span class="Thread-header-action" ng-if="ctrl.threadType !== 'group'">
<a ng-if="ctrl.canAwardBid()"
class="btn btn-primary btn-small Thread-header-button"
href="/projects/{{ctrl.project.seo_url}}?awardBid={{ctrl.selectedBid.get().id}}#bids" fl-analytics="Award">Award</a>
<a class="btn btn-small btn-primary Thread-header-button" ng-if="ctrl.canAcceptProject()" href="/projects/{{ctrl.project.seo_url}}?accept=true#bids" fl-analytics="Accept">Accept</a>
<a class="btn btn-primary btn-small Thread-header-button" ng-if="ctrl.canCreateMilestone()" href="/projects/{{ctrl.project.seo_url}}/?createMilestoneFor={{ctrl.otherUser.id}}#management" fl-analytics="CreateMilestone">Create Milestone</a>
<a class="btn btn-small btn-primary Thread-header-button" ng-if="ctrl.canRequestMilestone()" href="/projects/{{ctrl.project.seo_url}}/?showRequestMilestone=true#management" fl-analytics="RequestMilestone">Request Milestone</a>
<a class="btn btn-small btn-secondary Thread-header-button" ng-if="!ctrl.project && !ctrl.selectedBid" href="/u/{{ctrl.otherUser.username}}?showhireme=true" fl-analytics="Hireme">Hire me</a>
</span>
</div>
</header>
<div class="Thread-view" ng-switch="ctrl.state" fl-scroll-glue fl-in-viewport-container>
<div class="section-inner" ng-switch-when="loading">
<div class="Thread-loader">
<div class="loadingicon">Loading...</div>
</div>
</div>
<div class="Thread-empty section-inner" ng-switch-when="empty" fl-analytics-subsection="EmptyThread">
<!-- TO DO: Clean up once AB Test is done -->
<fl-svg class="Thread-empty-img" src="images/empty-views/inbox.svg"></fl-svg>
<span ng-if="!(ctrl.newChatBgAbTest && ctrl.isOwner)">
<h2 class="Thread-empty-header">Empty inbox? That's ok!</h2>
<p class="Thread-empty-text">Start a new conversation and fill this space with messages.</p>
</span>
<span ng-if="ctrl.newChatBgAbTest && ctrl.isOwner">
<h2 class="Thread-empty-header">Chat now to make sure they're right for your project!</h2>
<p class="Thread-empty-text">"Why do you think you are a good fit for this particular project?" - me</p>
</span>
</div>
<div class="Thread-empty section-inner" ng-switch-when="displayError" fl-analytics-subsection="ErrorThreadDisplay">
<fl-svg class="Thread-empty-img" src="images/empty-views/inbox.svg"></fl-svg>
<h2 class="Thread-empty-header">Oops, something went wrong.</h2>
<p class="Thread-empty-text" ng-if="ctrl.error.permissionDenied">Sorry, you cannot start a conversation with this user.</p>
<p class="Thread-empty-text" ng-if="ctrl.error.unknownError">Please try reloading the page. Thank you.</p>
</div>
<div class="section-inner" ng-switch-when="active" fl-analytics-subsection="ThreadMessageList">
<!-- PAGE VIEW -->
<!-- user message list -->
<ul class="Thread-message-list">
<!-- infinite scrolling -->
<div class="Thread-loader" ng-if="ctrl.hasMoreMessages">
<div class="loadingicon" fl-in-viewport="ctrl.loadMoreMessages()" fl-in-viewport-infinite>Loading earlier messages...</div>
</div>
<li class="Thread-message" ng-repeat="m in ctrl.messages | orderBy: 'time_created' as messages track by $index" id="{{m.id}}">
<div class="ChatBubble" ng-if="m.from_user !== ctrl.user" ng-class="{'ChatBubble--secondary': messages[$index - 1].from_user === m.from_user}">
<div class="ChatBubble-user" ng-if="messages[$index - 1].from_user !== m.from_user">
<div class="ChatBubble-user-inner">
<!-- Clean up once AB Test is done -->
<span ng-if="ctrl.showOnlineOfflineStatus" class="ChatBubble-user--online online-status--attached"
fl-online-offline-icon user-id="ctrl.otherUser.id"></span>
<!-- End Clean up -->
<img src="{{ ctrl.threadObj.getUsers()[m.from_user].avatar_cdn }}" alt="Profile picture of {{ ctrl.threadObj.getUsers()[m.from_user].username }}" class="ChatBubble-user-img profile-img profile-img--small">
</div>
</div>
<div class="ChatBubble-content">
<div class="ChatBubble-message">{{ m.message }}</div>
<time class="ChatBubble-time" ng-if="messages[$index + 1].from_user !== m.from_user">{{ m.time_created | timeAgoFilter }} ago</time>
</div>
</div>
<div class="ChatBubble ChatBubble--reverse" ng-if="m.from_user === ctrl.user" ng-class="{'ChatBubble--secondary': messages[$index - 1].from_user === m.from_user}">
<div class="ChatBubble-content">
<div class="ChatBubble-message ChatBubble-message--light">{{ m.message }}</div>
<time class="ChatBubble-time" ng-if="messages[$index + 1].from_user !== m.from_user">{{ m.time_created | timeAgoFilter }} ago</time>
<div class="ChatBubble-error" ng-repeat="error in m.errors">
<span class="icon-notification"> </span>
{{ error.message }}
</div>
</div>
</div>
</li>
</ul>
<div class="Thread-message" ng-if="ctrl.isTyping()">
<div class="ChatBubble">
<div class="ChatBubble-content">
<div class="ChatBubble-message ChatBubble-message--typing">
<div class="Typing">
<span class="Typing-bullet"></span>
<span class="Typing-bullet"></span>
<span class="Typing-bullet"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Thread-inputContainer" fl-analytics-subsection="ThreadInput" ng-class="{'Thread-inputContainer--disabled': ctrl.state !== 'active' && ctrl.state !== 'empty'}" ng-disabled="ctrl.state !== 'active' && ctrl.state !== 'empty'">
<div class="section-inner">
<div class="Thread-reply">
<textarea placeholder="Write a message..." ng-model="ctrl.newMessage" ng-disabled="ctrl.state === 'displayError'" ng-keydown="ctrl.textEntered()" class="Thread-reply-input" fl-autoresize></textarea>
<button class="Thread-reply-btn ng-binding" ng-click="ctrl.sendMessage(ctrl.threadObj, ctrl.otherUser, ctrl.newMessage)" fl-analytics="PostNewMessage" ng-disabled="!ctrl.newMessage">
<fl-svg src="/images/icons/flicon-send.svg">
</button>
</div>
</div>
</div>
</div>