Skip to content

Commit

Permalink
[ui] Convert Hue to jQuery
Browse files Browse the repository at this point in the history 
* Updated Beeswax
* Upgraded jQuery to 1.7
* Styled filechooser
* Added fileuploader
* Initial support for table creation
* Initial import for Shell app
* Improved Filebrowser and JobDesigner, WIP
* Improved usability and look'n'feel
* Added sign out link and fixed login page
* Updated colors, fixed bugs on filebrowser
* Update H1 consistency on Beeswax
* Updated H1 consistency in JobBrowser
* Sample material for Babel i18n
* Implementation of common header and footer on Desktop
  • Loading branch information
@enricoberti
enricoberti authored and bc Wong committed Apr 6, 2012
1 parent 2c3ee3d commit 5239e04
Show file tree
Hide file tree
Showing 680 changed files with 35,207 additions and 5,250 deletions.
4 changes: 4 additions & 0 deletions .gitignore
View file
@@ -1,10 +1,14 @@
# OS X nonsense
.DS_Store
._*

# Python compiled files
*.pyc
*.pyo

# Language compiled files
*.mo

# vim tmp files
.*.swp
.*.swo
Expand Down
39 changes: 21 additions & 18 deletions apps/about/src/about/templates/index.mako
View file
Expand Up @@ -13,24 +13,27 @@
## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
## See the License for the specific language governing permissions and
## limitations under the License.
<!DOCTYPE html>
<%!
from desktop.views import commonheader, commonfooter
%>
${commonheader("About jHue", "about", "100px")}
<div class="menubar">
<div class="menubar-inner">
<div class="container-fluid">
<ul class="nav">
<li><a href="${url("desktop.views.dump_config")}">Configuration</a></li>
<li><a href="${url("desktop.views.check_config")}">Check for misconfiguration</a></li>
<li><a href="${url("desktop.views.log_view")}">Server Logs</a></li>
</ul>
</div>
</div>
</div>

<div class="container-fluid">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>About - Hue</title>
</head>

<body>
<center>
<img src="/static/art/help/logo.png" />
<p>Hue</p>
<p>${version}</p>
<p>&nbsp;</p>
<p><a target="_blank" href="${url("desktop.views.dump_config")}">Configuration</a></p>
<p><a target="_blank" href="${url("desktop.views.check_config")}">Check for Misconfiguration</a></p>
<p><a target="_blank" href="${url("desktop.views.log_view")}">Server Logs</a></p>
</center>
</body>
<p>Hue ${version}</p>

</div>

</html>
${commonfooter()}
95 changes: 76 additions & 19 deletions apps/beeswax/src/beeswax/templates/beeswax_components.mako
View file
Expand Up @@ -16,6 +16,66 @@
<%!
from desktop.lib.django_util import extract_field_data
%>
<%def name="fieldName(field)">
</%def>

<%def name="label(
field,
render_default=False,
data_filters=None,
hidden=False,
notitle=False,
tag='input',
klass=None,
attrs=None,
value=None,
help=False,
help_attrs=None,
dd_attrs=None,
dt_attrs=None,
title_klass=None,
button_text=False
)">
<%
if value is None:
value = extract_field_data(field)
def make_attr_str(attributes):
if attributes is None:
attributes = {}
ret_str = ""
for key, value in attributes.iteritems():
if key == "klass":
key = "class"
ret_str += "%s='%s'" % (key.replace("_", "-"), unicode(value))
return ret_str
if not attrs:
attrs = {}
if not render_default:
attrs.setdefault('type', 'text')
if data_filters:
attrs.data_filters = data_filters
classes = []
if klass:
classes.append(klass)
if hidden:
classes.append("jframe-hidden")
cls = ' '.join(classes)
title_classes = []
if title_klass:
title_classes.append(title_klass)
if notitle or hidden:
title_classes.append("jframe-hidden")
titlecls = ' '.join(title_classes)
%>
${field.label_tag() | n}
</%def>


<%def name="field(
field,
Expand Down Expand Up @@ -73,8 +133,6 @@
% if field.is_hidden:
${unicode(field) | n}
% else:
<dt class="${titlecls}" ${make_attr_str(dt_attrs) | n}>${field.label_tag() | n}</dt>
<dd class="${cls}" ${make_attr_str(dd_attrs) | n}>
% if render_default:
${unicode(field) | n}
% else:
Expand All @@ -83,20 +141,20 @@
% elif tag == 'button':
<button name="${field.html_name | n}" ${make_attr_str(attrs) | n} value="${value}"/>${button_text or field.name or ''}</button>
% elif tag == 'checkbox':
<input type="checkbox" name="${field.html_name | n}" ${make_attr_str(attrs) | n} ${value and "CHECKED" or ""}/>${button_text or field.name or ''}</input>
% if help:
<input type="checkbox" name="${field.html_name | n}" ${make_attr_str(attrs) | n} ${value and "CHECKED" or ""}/ /> <span rel="popover" data-content="${help}" >${button_text or field.name or ''}</span>
% else:
<input type="checkbox" name="${field.html_name | n}" ${make_attr_str(attrs) | n} ${value and "CHECKED" or ""}/> <span>${button_text or field.name or ''}</span>
% endif
% else:
<${tag} name="${field.html_name | n}" value="${extract_field_data(field) or ''}" ${make_attr_str(attrs) | n} />
% endif
% endif
% if help:
<p class="jframe-inline" data-filters="HelpTip" ${make_attr_str(help_attrs) | n}>${help}</p>
% endif
</dd>
% if len(field.errors):
<dd class="beeswax_error jframe-error">
${unicode(field.errors) | n}
</dd>
% endif
% endif
</%def>

Expand All @@ -121,14 +179,13 @@
${pageref(page.num_pages())}
</%def>
<%def name="pagination(page)">
<div class="toolbar bw-designs_toolbar bw-navigation">
<p class="bw-showing_msg">Showing ${page.start_index()} to ${page.end_index()} of ${page.total_count()} items</p>
<div class="bw-nav_links">
<a title="Beginning of List" ${toppage(page)} class="bw-firstBlock">Beginning of List</a>
<a title="Previous Page" ${prevpage(page)} class="bw-prevBlock">Previous Page</a>
<p>page ${page.number} of ${page.num_pages()}</p>
<a title="Next page" ${nextpage(page)} class="bw-nextBlock">Next Page</a>
<a title="End of List" ${bottompage(page)} class="bw-lastBlock">End of List</a>
</div>
</div>
<p>Showing ${page.start_index()} to ${page.end_index()} of ${page.total_count()} items, page ${page.number} of ${page.num_pages()}</p>
<div class="pagination">
<ul>
<li class="prev"><a title="Beginning of List" ${toppage(page)} class="bw-firstBlock">&larr; Beginning of List</a></li>
<li><a title="Previous Page" ${prevpage(page)} class="bw-prevBlock">Previous Page</a></li>
<li><a title="Next page" ${nextpage(page)} class="bw-nextBlock">Next Page</a></li>
<li class="next"><a title="End of List" ${bottompage(page)} class="bw-lastBlock">End of List &rarr;</a></li>
</ul>
</div>
</%def>
173 changes: 97 additions & 76 deletions apps/beeswax/src/beeswax/templates/choose_delimiter.mako
View file
Expand Up @@ -13,83 +13,104 @@
## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
## See the License for the specific language governing permissions and
## limitations under the License.
<%namespace name="wrappers" file="header_footer.mako" />
<%!
from desktop.views import commonheader, commonfooter
%>
<%namespace name="layout" file="layout.mako" />
<%namespace name="comps" file="beeswax_components.mako" />
<%namespace name="util" file="util.mako" />
${wrappers.head('Choose a Delimiter')}
<div class="toolbar">
<ul data-filters="Breadcrumb" class="clearfix">
## TODO(marcus) These links should be part of the form, and do POST
<li><a href="${ url('beeswax.create_table.import_wizard') }">Choose File</a></li>
<li class="tabSelected"><a href="${ url('beeswax.create_table.import_wizard') }">Choose Delimiter</a></li>
<li><a href="${ url('beeswax.create_table.import_wizard') }">Define Columns</a></li>
</ul>
</div>
<div class="view" id="choose-delimiter">
<div class="bw-choose-delimiter">
<div class="hue-bc-section">
<form action ="${action}" method="POST">
<div class="jframe-hidden">
${util.render_form(file_form)}
${comps.field(delim_form['file_type'])}
</div>
<a name="step2"></a>
<dt>Step 2: Choose A Delimiter</dt>
<dd>
<dl class="clearfix">
<dt>
% if initial:
<div class="bw-confirm_delim" style="display: none">
<p class="delimiter_confirmation">Beeswax has determined that this file is delimited by ${delim_readable}. Is this correct?</p>
<label>
Yes
## TODO(marcus) The YES button does nothing
<input type="submit" name="submit_delim" value="Select this Delimiter" class="jframe-hidden"/>
</label>
<label>
No
## TODO(marcus) The NO + preview jump out of jframe
<input type="button" name="No" class="jframe-hidden"/>
</label>
</div>
% endif
<div class="bw-select_delim" class="jframe-hidden">
<dl>
${comps.field(delim_form["delimiter"], render_default=True, help=r'Enter the column delimiter. Must be a single character. Use syntax like "\001" or "\t" for special characters.', dd_attrs=dict(data_filters='SelectWithOther'))}
</dl>
<input class="jframe-hidden" type="submit" value="Preview" name="submit_preview"/>
<input class="jframe-hidden" type="submit" value="Select this Delimiter" name="submit_delim"/>
</div>
<div class="delimiter_preview_holder">
<table class="delimiter_preview">
<thead>
<tr>
% for i in range(n_cols):
<th>col_${i+1}</th>
% endfor
</tr>
</thead>
<tbody>
% for row in fields_list:
<tr>
% for val in row:
<td>${val}</td>
% endfor
</tr>
% endfor
</tbody>
</table>
</div>
</dt>
</dl>
<a class="jframe-submit_form jframe-visible hue-multipart-next" data-extra-data="{'submit_delim': 'Step 3: Define Your Columns'}">
Step 3: Define Your Columns&raquo;
</a>
<input type="submit" name="submit_delim" value="Step 3: Define Your Columns" class="jframe-hidden"/>
</dd>
</dl>
</form>
</div>
${commonheader("Beeswax: Create table from file", "beeswax", "100px")}
${layout.menubar(section='tables')}
<div class="container-fluid">
<div class="sidebar">
<div class="well">
<h6>Actions</h6>
<ul>
<li><a href="${ url('beeswax.create_table.import_wizard')}">Create a new table from file</a></li>
<li><a href="${ url('beeswax.create_table.create_table')}">Create a new table manually</a></li>
</ul>
</div>
</div>
${wrappers.foot()}


<div class="content">
<h1>Create a new table from file</h1>
<ul class="pills">
<li><a href="${ url('beeswax.create_table.import_wizard') }">Step 1: Choose File</a></li>
<li class="active"><a href="#">Step 2: Choose Delimiter</a></li>
<li><a href="#">Step 3: Define Columns</a></li>
</ul>
<br/>
<form id="delimiterForm" action="${action}" method="POST">
<div class="hidden">
${util.render_form(file_form)}
${comps.field(delim_form['file_type'])}
</div>
<fieldset>
<legend>Choose A Delimiter</legend>
<div class="clearfix">
${comps.label(delim_form["delimiter"])}
<div class="input">
${comps.field(delim_form["delimiter"], render_default=True, attrs=dict(
klass=""
))}
% if initial:
<span class="help-inline">
Beeswax has determined that this file is delimited by ${delim_readable}.
</span>
% endif
<span class="help-block">
Enter the column delimiter. Must be a single character. Use syntax like "\001" or "\t" for special characters.
</span>
</div>
</div>
</fieldset>
<div class="actions">
<input id="submit_preview" class="btn" type="submit" value="Preview" name="submit_preview"/>
<input class="btn primary" type="submit" name="submit_delim" value="Select this delimiter" />
</div>
</form>
<br/>
<ul class="tabs">
<li class="active"><a href="#tablePreview">Table preview</a></li>
</ul>
<div class="tab-content">
<div class="active tab-pane" id="tablePreview">
<table>
<thead>
<tr>
% for i in range(n_cols):
<th>col_${i+1}</th>
% endfor
</tr>
</thead>
<tbody>
% for row in fields_list:
<tr>
% for val in row:
<td>${val}</td>
% endfor
</tr>
% endfor
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#id_delimiter_1").css("margin-left","4px").attr("placeholder","Please write here your delimiter").hide();
$("#id_delimiter_0").change(function(){
if ($(this).val() == "__other__"){
$("#id_delimiter_1").show();
}
else {
$("#id_delimiter_1").hide();
$("#submit_preview").click();
}
});
});
</script>

${commonfooter()}

0 comments on commit 5239e04

Please sign in to comment.