Skip to content

Commit 3d33c89

Browse files
agjohnsonagjohnson
authored
Some additions to the project import configuration page (#185)
* Some additions to the project import configuration page I pulled down #166 to provide a bit of guidance, but ended up with fixes to the PR either way. I added a few features on top, to replace plain text with visual elements and interactive components. These aren't fully working yet (the example selector namely, see #184). * Update JS comment to be accurate
1 parent b39b210 commit 3d33c89

File tree

4 files changed

+111
-73
lines changed

4 files changed

+111
-73
lines changed

‎readthedocsext/theme/static/readthedocsext/theme/js/site.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
{% load i18n %}
44
{% load crispy_forms_tags %}
55

6-
{% block title %}{% trans "Add Project" %}{% endblock %}
6+
{% block title %}{% trans "Add project" %}{% endblock %}
77

88
{% block content %}
9+
{% block project_add_content %}
910
<div class="ui very padded centered stackable grid">
10-
{% block project_add_content %}
11-
<div class="{% block project_add_css_classes %}ui ten wide tablet six wide computer column{% endblock project_add_css_classes %}">
11+
<div class="{% block project_add_content_classes %}ui fourteen wide tablet eight wide computer column{% endblock %}">
1212

1313
{% block project_add_content_header %}
1414
<h1 class="ui medium header">
@@ -22,57 +22,56 @@ <h1 class="ui medium header">
2222
</h1>
2323
{% endblock project_add_content_header %}
2424

25-
{% block project_add_content_main %}
26-
{% endblock project_add_content_main %}
25+
{% block project_add_content_form %}
26+
<form class="ui form" action="{% url "projects_import_manual" %}" method="post">
2727

28-
<form class="ui form" action="{% url "projects_import_manual" %}" method="post">
28+
{% csrf_token %}
29+
{{ wizard.management_form }}
2930

30-
{% csrf_token %}
31-
{{ wizard.management_form }}
32-
33-
{% block wizard_form %}
34-
{% if wizard.form.forms %}
35-
{{ wizard.form.management_form }}
36-
{% for form in wizard.form.forms %}
37-
{% csrf_token %}
38-
{{ form|crispy }}
39-
{% endfor %}
40-
{% else %}
41-
{{ wizard.form|crispy }}
42-
{% endif %}
43-
{% endblock wizard_form %}
44-
45-
{% block wizard_actions %}
46-
<div>
47-
{% if wizard.steps.prev %}
48-
{# TODO: the previous button should not validate the form #}
49-
<button class="ui button" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">
50-
{% trans "Previous" %}
51-
</button>
52-
{% endif %}
53-
54-
{% if wizard.steps.next %}
55-
<input class="ui button primary" type="submit" value="{% trans "Next" %}" />
31+
{% block wizard_form %}
32+
{% if wizard.form.forms %}
33+
{{ wizard.form.management_form }}
34+
{% for form in wizard.form.forms %}
35+
{% csrf_token %}
36+
{{ form|crispy }}
37+
{% endfor %}
5638
{% else %}
57-
<input class="ui button primary" type="submit" value="{% trans "Finish" %}" />
39+
{{ wizard.form|crispy }}
5840
{% endif %}
59-
</div>
60-
{% endblock wizard_actions %}
41+
{% endblock wizard_form %}
6142

62-
</form>
43+
{% block wizard_actions %}
44+
<div>
45+
{% if wizard.steps.prev %}
46+
<button class="ui button" name="wizard_goto_step" value="{{ wizard.steps.prev }}">
47+
{% trans "Previous" %}
48+
</button>
49+
{% endif %}
50+
51+
{% if wizard.steps.next %}
52+
<input class="ui button primary" type="submit" value="{% trans "Next" %}" />
53+
{% else %}
54+
<input class="ui button primary" type="submit" value="{% trans "Finish" %}" />
55+
{% endif %}
56+
</div>
57+
{% endblock wizard_actions %}
58+
59+
</form>
60+
{% endblock project_add_content_form %}
6361
</div>
64-
{% endblock project_add_content %}
6562

66-
{% block project_add_help_topics %}
67-
<div class="ui ten wide tablet four wide computer column">
68-
<h2 class="ui small header">{% trans "Help topics" %}</h2>
69-
<div data-bind="using: EmbedTopicsView('intro/import-guide')">
70-
<div data-bind="template: { name: 'doc-topics' }"></div>
63+
<div class="ui fourteen wide tablet four wide computer column">
64+
{% block project_add_sidebar %}
65+
<h2 class="ui small header">{% trans "Help topics" %}</h2>
66+
<div class="ui bulleted list">
67+
{% block project_add_sidebar_help_topics %}
68+
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/intro/import-guide.html" text="Connecting a repository" is_external=True class="item" %}
69+
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/en/stable/tutorial/index.html" text="Read the Docs tutorial" is_external=True class="item" %}
70+
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/examples.html" text="Example projects" is_external=True class="item" %}
71+
{% endblock project_add_sidebar_help_topics %}
72+
</div>
73+
{% endblock project_add_sidebar %}
7174
</div>
7275
</div>
73-
{% endblock project_add_help_topics %}
74-
</div>
75-
76-
{% include "includes/utils/embed_docs.html" %}
77-
78-
{% endblock %}
76+
{% endblock project_add_content %}
77+
{% endblock content %}

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

Lines changed: 54 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,60 @@
22
{% load i18n %}
33

44
{% block project_add_content_subheader %}
5-
{% trans "Add a configuration file (<code>.readthedocs.yaml</code>) to your project" %}
5+
{% trans "Add a configuration file to your project" %}
66
{% endblock project_add_content_subheader %}
77

8-
{% block project_add_css_classes %}ui ten wide tablet wide computer column{% endblock project_add_css_classes %}
9-
{% block project_add_content_main %}
10-
<p class="info">
8+
{% block project_add_content_classes %}ui fourteen wide tablet twelve wide computer column{% endblock %}
9+
10+
{% block project_add_content_form %}
11+
<div class="ui small info message">
1112
{% blocktrans trimmed %}
12-
Make sure your project has a <code>.readthedocs.yaml</code> at the root of your repository. This file is required by Read the Docs to be able to build your documentation. You can <a href="https://docs.readthedocs.io/en/stable/config-file/v2.html">read more about this in our documentation</a>.
13+
A <code>.readthedocs.yaml</code> configuration file is required at the root of your repository in order to build your documentation.
1314
{% endblocktrans %}
14-
</p>
15+
16+
<a href="https://docs.readthedocs.io/page/config-file/index.html" target="_blank">
17+
{% trans "Learn how to add a configuration file to your project." %}
18+
</a>
19+
</div>
20+
21+
<div class="ui basic fitted right aligned segment">
22+
<span>{% trans "Example configuration for:" %}</span>
23+
<div class="ui inline dropdown" data-bind="semanticui: { dropdown: {}}">
24+
<input type="hidden" name="tool" value="sphinx">
25+
<span class="text">Sphinx</span>
26+
<i class="dropdown icon"></i>
27+
<div class="menu">
28+
<div class="item" data-value="sphinx">Sphinx</div>
29+
30+
{% comment %}
31+
Adding a second option here will require a bit of JS or FUI:
32+
https://github.com/readthedocs/ext-theme/issues/184
33+
{% endcomment %}
1534

16-
<p class="info">
17-
Here you have an example for a common Sphinx project:
35+
{# The `actionable` class here prevents the select from selecting the text #}
36+
<a class="actionable item" href="https://docs.readthedocs.io/page/config-file/index.html#getting-started-with-a-template" target="_blank">
37+
{% trans "See more examples" %}
38+
</a>
39+
</div>
40+
</div>
41+
</div>
1842

19-
<pre class="ui padded">
20-
<code class="ui small text">
21-
# .readthedocs.yaml
43+
<div class="ui mini padded inverted scrolling segment">
44+
<div class="ui top attached label">
45+
<code>.readthedocs.yaml</code>
46+
</div>
47+
<a class="ui top right attached icon label" href="#" data-clipboard-target="#project-create-sample-sphinx">
48+
<i class="fas fa-copy icon"></i>
49+
</a>
50+
<code class="highlight">
51+
<pre id="project-create-sample-sphinx">
2252
# Read the Docs configuration file
2353
# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
2454

2555
# Required
2656
version: 2
2757

28-
# Set the OS, Python version and other tools you might need
58+
# Set the OS, Python version, and other tools you might need
2959
build:
3060
os: ubuntu-22.04
3161
tools:
@@ -50,12 +80,17 @@
5080
# python:
5181
# install:
5282
# - requirements: docs/requirements.txt
53-
</code>
54-
</pre>
55-
</p>
83+
</pre>
84+
</code>
85+
</div>
86+
87+
{# Show the base form #}
88+
{{ block.super }}
5689

57-
{{ block.super }}
58-
{% endblock project_add_content_main %}
90+
{% endblock project_add_content_form %}
5991

60-
{% block project_add_help_topics %}
61-
{% endblock project_add_help_topics %}
92+
{% block project_add_sidebar_help_topics %}
93+
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/config-file/index.html" text="Configuration file tutorial" is_external=True class="item" %}
94+
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/config-file/v2.html" text="Configuration file reference" is_external=True class="item" %}
95+
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/guides/setup/git-repo-manual.html" text="Manually configuring a Git repository" is_external=True class="item" %}
96+
{% endblock project_add_sidebar_help_topics %}

‎src/js/application/index.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,17 @@ export class Application {
127127
});
128128
jquery(".ui.menu > .item[data-tab]").tab();
129129

130-
// Initialize clipboard, but only for data-clipboard-text. This is the most
131-
// generalized pattern for clipboard usage, so we won't yet worry about
132-
// adding the other data binding selectors.
133-
var clipboard_global = new clipboard(".ui.button[data-clipboard-text]");
134-
jquery(".ui.button[data-clipboard-text]").popup({
130+
/* Initialize clipboard.js using a few selectors that we are using. This
131+
* isn't a great fit for Knockout custom data binding or plugin, as the
132+
* library uses some builtin/hardcoded selectors. */
133+
var clipboard_global = new clipboard(
134+
"[data-clipboard-text], [data-clipboard-target]"
135+
);
136+
// Provide the user with some visual feedback using FUI popups
137+
jquery("[data-clipboard-text], [data-clipboard-target]").popup({
135138
on: "click",
136139
hoverable: false,
140+
content: "Copied!",
137141
});
138142
}
139143
}

0 commit comments

Comments
 (0)