Permalink
Browse files

[ui] Convert Hue to jQuery

* 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...
1 parent 2c3ee3d commit 5239e04e9653140d1b5b2b9e8d71f67525644fed @enricoberti enricoberti committed with bc Wong Nov 1, 2011
Showing 680 changed files with 35,207 additions and 5,250 deletions.
View
@@ -1,10 +1,14 @@
# OS X nonsense
.DS_Store
+._*
# Python compiled files
*.pyc
*.pyo
+# Language compiled files
+*.mo
+
# vim tmp files
.*.swp
.*.swo
@@ -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()}
@@ -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,
@@ -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:
@@ -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>
@@ -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>
@@ -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()}
Oops, something went wrong.

0 comments on commit 5239e04

Please sign in to comment.