This repository has been archived on 2023-03-18. You can view files and clone it, but cannot push or open issues or pull requests.
osr-discourse-src/app/assets/javascripts/discourse/templates/topic.hbs
Damon Aw a5e576adca UX Improvement: Autofocus the topic field on edit
- After clicking on the pencil icon to edit a topic, the focus is not set on the input.
- This leads to cases where using keyboard shorcuts (e.g. cmd + left) leads to navigation instead.
- Searching around online, it seems the cleanest way to add a text-field that autofocuses is to create a component.
- I followed the [cookbook](http://emberjs.com/guides/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/) and did the most naive implementation.
- This focuses the text-field but at the start of the input. Setting selectionStart and selectionEnd solves this problem, but does not work on IE 8 and below.
2014-10-14 23:31:01 -04:00

161 lines
5.0 KiB
Handlebars

<div class='container'>
{{custom-html "top"}}
{{global-notice}}
{{discourse-banner user=currentUser banner=site.banner overlay=view.hasScrolled}}
</div>
{{#if postStream.loaded}}
{{#if postStream.firstPostPresent}}
<div id='topic-title'>
<div class='container'>
{{#if showStarButton}}
<a {{bind-attr class=":star starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="starTooltip"}}></a>
{{/if}}
<div class="title-wrapper">
{{#if editingTopic}}
{{#if isPrivateMessage}}
<span class="private-message-glyph">{{fa-icon envelope}}</span>
{{autofocus-text-field id='edit-title' value=newTitle maxLength=maxTitleLength}}
{{else}}
{{autofocus-text-field id='edit-title' value=newTitle maxLength=maxTitleLength}}
</br>
{{category-chooser valueAttribute="id" value=newCategoryId source=category_id}}
{{/if}}
<button class='btn btn-primary btn-small no-text' {{action "finishedEditingTopic"}}>{{fa-icon check}}</button>
<button class='btn btn-small no-text' {{action "cancelEditingTopic"}}>{{fa-icon times}}</button>
{{else}}
<h1>
{{#unless is_warning}}
<span class="private-message-glyph">{{fa-icon envelope}}</span>
{{/unless}}
{{#if details.loaded}}
{{topic-status topic=model}}
<a href='{{unbound url}}' {{action "jumpTop"}}>
{{#if topicSaving}}
{{fancy_title}}
{{else}}
{{{fancy_title}}}
{{/if}}
</a>
{{/if}}
{{#if details.can_edit}}
<a href='#' {{action "editTopic"}} class='edit-topic' title='{{i18n edit}}'>{{fa-icon pencil}}</a>
{{/if}}
</h1>
{{#unless isPrivateMessage}}
{{#if category.parentCategory}}
{{bound-category-link category.parentCategory}}
{{/if}}
{{bound-category-link category}}
{{/unless}}
{{/if}}
</div>
{{plugin-outlet "topic-title"}}
</div>
</div>
{{/if}}
<div class="container posts">
{{view "selected-posts"}}
<div class="row">
<section class="topic-area" id='topic' data-topic-id='{{unbound id}}'>
<div class='posts-wrapper'>
{{render 'topic-progress'}}
{{#if postStream.loadingAbove}}
<div class='spinner'></div>
{{/if}}
{{#unless postStream.loadingFilter}}
{{cloaked-collection cloakView="post"
idProperty="post_number"
defaultHeight="200"
content=postStream.posts
slackRatio="15"
loadingHTML=controller.loadingHTML
preservesContext="true"
uncloakDefault="true"
offsetFixedTop="header"
offsetFixedBottom="#reply-control"}}
{{/unless}}
{{#if postStream.loadingBelow}}
<div class='spinner'></div>
{{/if}}
</div>
<div id='topic-bottom'></div>
{{#if postStream.loadingFilter}}
<div class='spinner small'></div>
{{else}}
{{#if postStream.loadedAllPosts}}
{{view 'topic-closing' topic=model}}
{{view 'topic-footer-buttons' topic=model}}
{{#if details.suggested_topics.length}}
<div id='suggested-topics'>
<h3>{{i18n suggested_topics.title}}</h3>
<div class='topics'>
{{basic-topic-list topics=details.suggested_topics postsAction="showTopicEntrance"}}
</div>
<h3>{{{view.browseMoreMessage}}}</h3>
</div>
{{/if}}
{{/if}}
{{/if}}
</section>
</div>
</div>
{{else}}
{{#if hasError}}
<div class='container'>
{{#if notFoundHtml}}
{{{notFoundHtml}}}
{{else}}
<div class="topic-error">
<div>{{message}}</div>
{{#if noRetry}}
{{#unless currentUser}}
<button {{action "showLogin"}} class='btn btn-primary topic-retry'>{{fa-icon user}} {{i18n log_in}}</button>
{{/unless}}
{{else}}
<button class="btn btn-primary topic-retry" {{action "retryLoading"}}><i class="fa fa-refresh"></i> {{i18n errors.buttons.again}}</button>
{{/if}}
</div>
{{#if retrying}}
<div class='spinner'></div>
{{/if}}
{{/if}}
</div>
{{else}}
<div class='container'>
<div class='spinner'></div>
</div>
{{/if}}
{{/if}}
{{render "share"}}
{{#if currentUser.enable_quoting}}
{{render "quote-button"}}
{{/if}}
{{#if currentUser.canManageTopic}}
{{show-topic-admin show="showTopicAdminMenu"}}
{{render "topic-admin-menu"}}
{{/if}}