Skip to content

Commit e4e4d4c

Browse files
OleLaursenOleLaursen
committed
Summary: Port group workflow customizations to Bootstrap
 - Legacy-Id: 8730
1 parent 0eb1df5 commit e4e4d4c

2 files changed

Lines changed: 107 additions & 123 deletions

File tree

‎ietf/templates/group/customize_workflow.html‎

Lines changed: 88 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,112 @@
1-
{% extends "base.html" %}
1+
{% extends "ietf.html" %}
22

3-
{% block title %}Customize Workflow for {{ group.acronym }} {{ group.type.name }}{% endblock %}
3+
{% load bootstrap3 %}
44

5-
{% block morecss %}
6-
{{ block.super }}
7-
.state-table .inactive,
8-
.tag-table .inactive { font-style: italic; color: #666; }
9-
.state-table .state { margin-bottom: 0.1em; }
10-
.state-table .set-next-states label { display: block; cursor: pointer; }
11-
.state-table .set-next-states label input { vertical-align: middle; }
12-
.state-table .set-state input, .set-tag input { width: 6em; }
13-
.state-table .toggled { display: none; }
14-
.state-table .toggler {
15-
color: #444;
16-
background: #ddd;
17-
font-weight: bold;
18-
text-decoration: none;
19-
padding: 1px 3px;
20-
display: inline-block;
21-
margin-left: 0.5em;
22-
margin-top: 0.5em;
23-
margin-bottom: 0.5em;
24-
}
25-
.state-table .inactive .toggler { color: #aaa; background: #eee; }
26-
.state-table .toggler:hover { color: #fff; background-color: #999; }
27-
{% endblock %}
5+
{% block title %}Customize Workflow for {{ group.acronym }} {{ group.type.name }}{% endblock %}
286

297
{% block content %}
308
{% load ietf_filters %}
319

32-
<div class="group-customize-workflow">
10+
<div id="group-customize-workflow">
3311

3412
<h1>Customize Workflow for {{ group.acronym }} {{ group.type.name }}</h1>
3513

36-
<p>Below you can customize the draft states and tags used in the
14+
<p class="help-block">Below you can customize the draft states and tags used in the
3715
<a href="{{ group.about_url }}">{{ group.acronym }} {{ group.type.name }}</a>. Note that some states are
3816
mandatory for group operation and cannot be deactivated.</p>
3917

4018
{% if group.type_id == "wg" %}
41-
<p>You can see the default Working Group I-D State Diagram
19+
<p class="help-block">You can see the default Working Group I-D State Diagram
4220
in <a href="http://tools.ietf.org/html/rfc6174#section-4.1">Section 4.1 of RFC6174</a>.</p>
4321
{% endif %}
4422

4523
<h3>States</h3>
4624

47-
<table class="ietf-table state-table">
48-
<tr>
49-
<th>Turn on/off</th>
50-
<th style="width:30em">State</th>
51-
<th style="width:26em">Next states</th>
52-
</tr>
53-
{% for state in states %}
54-
<tr class="{% cycle "oddrow" "evenrow" %}{% if not state.used %} inactive{% endif %}" style="vertical-align: top;">
55-
<td>
56-
{% if state.mandatory %}
57-
(mandatory)
58-
{% else %}
59-
<form class="set-state" method="post" action="">{% csrf_token %}
60-
{% if state.used %}
61-
<input type="hidden" name="state" value="{{ state.pk }}" />
62-
<input type="hidden" name="active" value="0" />
63-
<input type="submit" title="Click to deactive this state" value="Deactivate" />
64-
{% else %}
65-
<input type="hidden" name="state" value="{{ state.pk }}" />
66-
<input type="hidden" name="active" value="1" />
67-
<input type="submit" title="Click to active this state" value="Activate" />
68-
{% endif %}
69-
<input type="hidden" name="action" value="setstateactive" />
70-
</form>
71-
{% endif %}
72-
</td>
73-
<td>
74-
{{ state.name }} {% if not state.used %} (not used in {{ group.acronym }}){% endif %} {{ state|statehelp }}
75-
</td>
76-
<td>
77-
<div>
78-
{% if state.used_next_states %}
79-
{% for n in state.used_next_states %}<div class="state">{{ n.name }}</div>{% endfor %}
80-
{% else %}
81-
<div><i>None</i></div>
82-
{% endif %}
83-
<a class="toggler" title="Click to set next states for state" href="">+ customize</a>
84-
</div>
85-
<form class="toggled set-next-states" method="post" action="">{% csrf_token %}
86-
Select the next states:
87-
{% for checked, default, s in state.next_states_checkboxes %}
88-
<label{% if not s.used %} class="inactive"{% endif %}><input type="checkbox" name="next_states" value="{{ s.pk }}"{% if checked %} checked="checked"{% endif %} />{{ s.name }}{% if default %} (default){% endif %}</label>
89-
{% endfor %}
90-
<input type="hidden" name="state" value="{{ state.pk }}" />
91-
<input type="hidden" name="action" value="setnextstates" />
92-
<input class="submit" type="submit" value="Save" />
93-
</form>
94-
</td>
95-
</tr>
96-
{% endfor %}
25+
<table class="table state-table">
26+
<thead>
27+
<tr>
28+
<th>State</th>
29+
<th>Next states</th>
30+
<th>Turn on/off</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
{% for state in states %}
35+
<tr class="{% if not state.used %}inactive{% endif %}">
36+
<td class="name">
37+
{{ state.name }} {% if not state.used %} (not used in {{ group.acronym }}){% endif %} {{ state|statehelp }}
38+
</td>
39+
<td class="next-states">
40+
<div>
41+
{% if state.used_next_states %}
42+
{% for n in state.used_next_states %}<div class="state">{{ n.name }}</div>{% endfor %}
43+
{% else %}
44+
<div><i>None</i></div>
45+
{% endif %}
46+
47+
<div>
48+
<button class="btn btn-default btn-sm {% if not state.used %}disabled{% endif %}" title="Click to set next states for state" data-toggle="collapse" data-target="#nexts{{ state.pk }}" aria-expanded="false" aria-controls="nexts{{ state.pk }}">
49+
<span class="caret"></span> Customize
50+
</button>
51+
</div>
52+
</div>
53+
<form id="nexts{{ state.pk }}" class="set-next-states collapse out" method="post" action="">{% csrf_token %}
54+
<div>Select the next states:</div>
55+
56+
{% for checked, default, s in state.next_states_checkboxes %}
57+
<div class="checkbox {% if not s.used %}inactive{% endif %}">
58+
<label>
59+
<input type="checkbox" name="next_states" value="{{ s.pk }}"{% if checked %} checked="checked"{% endif %} />
60+
{{ s.name }} {% if default %}<span class="label label-default">default</span>{% endif %}
61+
</label>
62+
</div>
63+
{% endfor %}
64+
65+
<input type="hidden" name="state" value="{{ state.pk }}" />
66+
<input type="hidden" name="action" value="setnextstates" />
67+
<button class="btn btn-primary" type="submit">Save</button>
68+
</form>
69+
</td>
70+
<td>
71+
{% if state.mandatory %}
72+
(mandatory)
73+
{% else %}
74+
<form class="set-state" method="post">{% csrf_token %}
75+
<input type="hidden" name="state" value="{{ state.pk }}" />
76+
<input type="hidden" name="action" value="setstateactive" />
77+
<input type="hidden" name="active" value="{{ state.used|yesno:"0,1" }}" />
78+
<button class="btn btn-{% if state.used %}danger{% else %}success{% endif %}" type="submit" title="Click to {% if state.used %}de{% endif %}activate this state">{% if state.used %}Deactivate{% else %}Activate{% endif %}</button>
79+
</form>
80+
{% endif %}
81+
</td>
82+
</tr>
83+
{% endfor %}
84+
</tbody>
9785
</table>
9886

9987
<h3>Tags</h3>
10088

101-
<table class="ietf-table tag-table">
102-
<tr>
103-
<th>Turn on/off</th>
104-
<th>Tag</th>
105-
</tr>
106-
{% for tag in tags %}
107-
<tr class="{% cycle "oddrow" "evenrow" %}{% if not tag.used %} inactive{% endif %}" style="vertical-align: top;">
108-
<td>
109-
<form class="set-tag" method="post" action="">{% csrf_token %}
110-
{% if tag.used %}
111-
<input type="hidden" name="tag" value="{{ tag.pk }}" />
112-
<input type="hidden" name="active" value="0" />
113-
<input type="submit" value="Deactivate" />
114-
{% else %}
115-
<input type="hidden" name="tag" value="{{ tag.pk }}" />
116-
<input type="hidden" name="active" value="1" />
117-
<input type="submit" value="Activate" />
118-
{% endif %}
119-
<input type="hidden" name="action" value="settagactive" />
120-
</form>
121-
</td>
122-
<td><span>{{ tag.name }} {% if not tag.used %} (not used in {{ group.acronym }}){% endif %}</span></td>
123-
</tr>
124-
{% endfor %}
89+
<table class="table tag-table">
90+
<thead>
91+
<tr>
92+
<th>Tag</th>
93+
<th>Turn on/off</th>
94+
</tr>
95+
</thead>
96+
<tbody>
97+
{% for tag in tags %}
98+
<tr class="{% if not tag.used %}inactive{% endif %}">
99+
<td class="name">{{ tag.name }} {% if not tag.used %} (not used in {{ group.acronym }}){% endif %}</td>
100+
<td>
101+
<form class="set-tag" method="post">{% csrf_token %}
102+
<input type="hidden" name="tag" value="{{ tag.pk }}" />
103+
<input type="hidden" name="action" value="settagactive" />
104+
<input type="hidden" name="active" value="{{ tag.used|yesno:"0,1" }}" />
105+
<button class="btn btn-{% if tag.used %}danger{% else %}success{% endif %}" type="submit" title="Click to {% if tag.used %}de{% endif %}activate this tag">{% if tag.used %}Deactivate{% else %}Activate{% endif %}</button>
106+
</form>
107+
</td>
108+
</tr>
109+
{% endfor %}
110+
</tbody>
125111
</table>
126-
127112
{% endblock content %}
128-
129-
{% block js %}
130-
<script type="text/javascript">
131-
//<![CDATA[
132-
jQuery('.state-table .toggler').click(function(e) {
133-
e.preventDefault();
134-
var toggler = jQuery(this),
135-
toggled = toggler.parent().siblings(".toggled");
136-
if (toggled.is(":hidden")) {
137-
toggler.html("&ndash; customize");
138-
toggled.slideDown(300);
139-
}
140-
else {
141-
toggler.html("+ customize");
142-
toggled.slideUp(300);
143-
}
144-
});
145-
//]]>
146-
</script>
147-
{% endblock %}

‎static/facelift/css/ietf.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,3 +220,22 @@ pre { line-height: 1.214; }
220220
#milestones-form .milestone.delete, #milestones-form .edit-milestone.delete, #milestones-form .edit-milestone.delete input {
221221
color: #aaa !important;
222222
}
223+
224+
/* customize group workflow */
225+
#group-customize-workflow .state-table .inactive .name, .state-table .inactive .state, .state-table div.inactive, .tag-table .inactive .name {
226+
font-style: italic;
227+
color: #666;
228+
}
229+
230+
#group-customize-workflow .state-table .state {
231+
margin-bottom: 0.1em;
232+
}
233+
234+
#group-customize-workflow .state-table .set-state button, .set-tag button {
235+
width: 6.5em; /* prevent the layout from jumping around */
236+
}
237+
238+
#group-customize-workflow .state-table td.next-states {
239+
width: 32em; /* prevent the layout from jumping around */
240+
}
241+

0 commit comments

Comments
 (0)