Skip to content

Commit 8c765a0

Browse files
agjohnsonagjohnson
committed
Tweak project create layout and elements
- Make the search more obvious it is a search - Drop the mention of syncing repositories down to the bottom of the page. This should be a last resort in most cases, but still needed UX - Tune the copy to point the user to "search for a project", instead of instructions on not finding a repository - Tune some of the dynamic elements used in the search results - Some changes related to #166 and #185
1 parent b12f57c commit 8c765a0

File tree

1 file changed

+104
-64
lines changed

1 file changed

+104
-64
lines changed

‎readthedocsext/theme/templates/projects/import_form.html

Lines changed: 104 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -67,21 +67,22 @@ <h1 class="ui medium header">
6767

6868
{% if has_connected_accounts %}
6969
{# Search prompt and dropdown #}
70+
<label>
71+
{% trans "Repository name:" %}
72+
</label>
7073
<div class="ui fluid disabled loading search" data-bind="semanticui: {search: search_config()}, css: {disabled: is_loading(), loading: is_loading()}">
71-
<div class="ui fluid icon large action input">
72-
<input class="ui text" type="text" placeholder="{% trans "Search repositories" %}">
73-
<button
74-
class="ui right icon button"
75-
data-bind="click: sync_remote_repos, css: {disabled: is_syncing(), loading: is_syncing()}"
76-
data-content="{% trans "Refresh repositories" %}">
77-
<i class="fa-duotone fa-refresh icon"></i>
78-
</button>
74+
<div class="ui fluid icon large input">
75+
<input
76+
class="ui text"
77+
type="text"
78+
autofocus=true />
79+
<i class="fa-duotone fa-search icon"></i>
7980
</div>
8081
<div class="results"></div>
8182

8283
{% comment %}
8384
This is the template used by Knockout to render the SUI search
84-
template. The output format is similar, but there is additional
85+
template. The output format is similar, but there are additional
8586
conditional blocks for display purposes. The `standard` search
8687
template only uses image, title, and description.
8788

@@ -123,53 +124,82 @@ <h1 class="ui medium header">
123124
</div>
124125
{# End of search prompt and dropdown #}
125126

126-
<div class="ui placeholder segment" data-bind="visible: !is_selected()">
127-
128-
{% if not has_connected_accounts %}
129-
<div class="ui icon info message">
130-
<i class="fa-duotone fa-magic icon"></i>
131-
<div class="content">
132-
<p>
133-
{# Translators: "connected service" refers to the user setting page for "Connected Services" #}
134-
{% blocktrans trimmed %}
135-
To enable automatic configuration of repositories, you must first
136-
add a connected service to your account.
137-
{% endblocktrans %}
138-
</p>
139-
<button class="ui right floated button" href="{{ url_connected_services }}">
140-
{% trans "Add a connected service" %}
141-
</button>
127+
<div class="ui basic horizontally fitted segment" data-bind="visible: !is_selected()">
128+
<div class="ui top attached placeholder segment">
129+
{% if not has_connected_accounts %}
130+
<div class="ui icon info message">
131+
<i class="fa-duotone fa-magic icon"></i>
132+
<div class="content">
133+
<p>
134+
{# Translators: "connected service" refers to the user setting page for "Connected Services" #}
135+
{% blocktrans trimmed %}
136+
To enable automatic configuration of repositories, you must first
137+
add a connected service to your account.
138+
{% endblocktrans %}
139+
</p>
140+
<button class="ui right floated button" href="{{ url_connected_services }}">
141+
{% trans "Add a connected service" %}
142+
</button>
143+
</div>
142144
</div>
143-
</div>
144-
{% endif %}
145-
146-
<div class="ui icon header">
147-
{% trans "Configure a repository" %}
145+
{% endif %}
148146

149-
<div class="sub header">
147+
<div class="ui icon header">
150148
{% if not has_connected_accounts %}
151149
{# User does not yet have any connected accounts, don't ask to "select repository" #}
152-
{# Translators: "connected service" refers to the user setting page for "Connected Services" #}
153-
{% blocktrans trimmed with url=url_connected_services %}
154-
To enable automatic configuration of repositories, you must first
155-
<a href="{{ url }}">add a connected service to your account</a>.
156-
If you do not have an account to connect, you may still be able
157-
to manually configure repositories.
158-
{% endblocktrans %}
150+
{% trans "Connect an account" %}
151+
152+
<div class="sub header">
153+
{# Translators: "connected service" refers to the user setting page for "Connected Services" #}
154+
{% blocktrans trimmed with url=url_connected_services %}
155+
To enable automatic configuration of repositories, you must first
156+
<a href="{{ url }}">add a connected service to your account</a>.
157+
If you do not have an account to connect, you may still be able
158+
to manually configure repositories.
159+
{% endblocktrans %}
160+
</div>
159161
{% else %}
160-
{# User has connected accounts, don't point to connecting GitHub/etc #}
161-
{% blocktrans trimmed %}
162-
If you do not see the repository you would like to configure, you
163-
can try refreshing the list of repositories, or you might be able
164-
to add a new project by manually configure your repository.
165-
{% endblocktrans %}
162+
{# Push user towards searching using input above #}
163+
<i class="fad fa-search icon"></i>
164+
{% trans "Select a repository" %}
165+
166+
<div class="sub header">
167+
{# User has connected accounts, don't point to connecting GitHub/etc #}
168+
{% blocktrans trimmed %}
169+
Use the search above to find the repository you would like to
170+
use to build your new project. This project will be connected to
171+
the repository through your connected account.
172+
{% endblocktrans %}
173+
</div>
166174
{% endif %}
167175
</div>
176+
177+
</div>
178+
<div class="ui small bottom attached center aligned message">
179+
180+
{% trans "Can't find the repository you are searching for?" %}
181+
182+
<button
183+
class="ui mini black basic compact right aligned button"
184+
data-bind="click: sync_remote_repos, css: {disabled: is_syncing(), loading: is_syncing()}">
185+
<i class="fa-duotone fa-refresh icon"></i>
186+
{% trans "Refresh your repositories" %}
187+
</button>
188+
168189
</div>
169190
</div>
170191
{# End placeholder segment when no repository is selected #}
171192

172-
{# Card display for selected remote repository #}
193+
{% comment %}
194+
Card display for selected remote repository
195+
===========================================
196+
197+
This block only shows when there is a selected project from the
198+
search selction above. This block shows some information about using
199+
the repository, such as where the repository has already been
200+
connected and why the repository can/cannot be used.
201+
202+
{% endcomment %}
173203
<div class="ui fluid card" data-bind="visible: is_selected, with: selected" style="display: none;">
174204
<div class="content">
175205
<img class="ui right floated mini rounded image" data-bind="attr: { src: avatar_url }">
@@ -242,13 +272,14 @@ <h1 class="ui medium header">
242272
{% endblocktrans %}
243273
</p>
244274
<p class="ui red text" data-bind="visible: !admin">
245-
<a class="ui red mini basic button">{% trans "Read more" %}</a>
275+
<a class="ui red mini basic button" href="https://docs.readthedocs.io/page/intro/import-guide.html#manually-import-your-docs">
276+
{% trans "Learn how to manually configure this repository" %}
277+
</a>
246278
</p>
247279
</div>
248280
</div>
249281
</div>
250282

251-
252283
{# Is the repository already imported? #}
253284
<div class="item" data-bind="if: has_project">
254285
<i class="fa-solid fa-plus icon"></i>
@@ -258,21 +289,31 @@ <h1 class="ui medium header">
258289
</div>
259290
<div class="description">
260291
<p>
261-
{% blocktrans trimmed %}
262-
This repository can was previously configured for
263-
another project already. Configuring this repository
264-
again will not affect existing projects.
265-
{% endblocktrans %}
266-
</p>
267-
<p data-bind="foreach: matches">
268-
<i class="fa-duotone fa-arrow-up-right-from-square icon"></i>
269-
<a data-bind="text: id, attr: {href: url}" target="_blank"></a>
292+
{% blocktrans trimmed %}
293+
This following projects were already configured to use this repository:
294+
{% endblocktrans %}
270295
</p>
296+
<div data-bind="foreach: matches">
297+
{% comment %}
298+
This is currently using the v2 API because the v3
299+
API doesn't support searching. Once the API v3
300+
supports searching, this can be switched to using
301+
the project chip template include. This will
302+
include the project name, avatar URL, and embedded
303+
popup for the project.
304+
305+
We only have two fields here for now: url and id (slug)
306+
{% endcomment %}
307+
<a class="ui basic image label" data-bind="attr: {href: url}" target="_blank">
308+
{# TODO switch this to use the full response from the v3 API #}
309+
{# <img src="{{ project.remote_repository.avatar_url }}" /> #}
310+
<span data-bind="text: id"></span>
311+
</a>
312+
</div>
271313
</div>
272314
</div>
273315
</div>
274316

275-
276317
</div>
277318
</div>
278319

@@ -288,7 +329,7 @@ <h1 class="ui medium header">
288329
<input type="hidden" name="project_url" data-bind="value: html_url" />
289330
<input type="hidden" name="remote_repository" data-bind="value: id" />
290331

291-
<button class="ui primary button">
332+
<button class="ui primary button" data-bind="css: {disabled: !admin}">
292333
{% trans "Set up" %}
293334
</button>
294335
</form>
@@ -305,22 +346,21 @@ <h1 class="ui medium header">
305346
<div class="ui tab" data-tab="manual">
306347
<div class="ui warning message">
307348
{% blocktrans trimmed %}
308-
Extra steps well be required to complete repository setup.
349+
Extra steps will be required to complete repository setup.
309350
{% endblocktrans %}
310351
</div>
311352
<p>
312353
{% blocktrans trimmed %}
313354
We recommend you only attempt manual configuration if you are
314355
familiar with configuring your repository and have the necessary
315-
admin privileges to configure the repository. Manual configuration
356+
admin privileges to configure this repository. Manual configuration
316357
will require several steps after your project is created in order
317-
to automatically build your project on changes to the repository.
358+
to automatically build your project.
318359
{% endblocktrans %}
319360
</p>
320361
<div class="ui right aligned basic segment">
321-
<a class="ui basic button" href="https://docs.readthedocs.io/en/stable/intro/import-guide.html" target="_blank">
322-
<i class="fa-duotone fa-question icon"></i>
323-
{% trans "Read more" %}
362+
<a class="ui basic button" href="https://docs.readthedocs.io/page/intro/import-guide.html" target="_blank">
363+
{% trans "Learn more" %}
324364
</a>
325365
<a class="ui button" href="{% url 'projects_import_manual' %}">
326366
<i class="fa-solid fa-triangle-exclamation icon"></i>

0 commit comments

Comments
 (0)