Skip to content

Update to bootstrap 3 and add search capability #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guilhermeblanco merged 3 commits into from
Dec 19, 2013
Merged

Update to bootstrap 3 and add search capability #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0ca4eb2
Update template to bootstrap 3.0 Step 1
pabgaran Dec 17, 2013
2b47c8d
Update template to bootstrap 3.0 and add search capability
pabgaran Dec 19, 2013
b926e6a
Fix function names
pabgaran Dec 19, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 97 additions & 58 deletions Resources/views/Editor/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% extends "ServerGroveTranslationEditorBundle::layout.html.twig" %}

{% block sidebar %}

<script>
function showEntryListAll()
{
Expand All @@ -13,6 +14,31 @@
.addClass('.table-striped');
}

function showFilterEntries(val)
{
var $zebraStripedTable = $('.table-striped');

$zebraStripedTable.find('tbody tr').hide();

// find alias
var $rows = $zebraStripedTable.find('tbody tr td.alias:contains('+ val +')');
$rows.parent('tr').show();
$rows.each(function() {
text = $(this).text().replace(val, '<span class="high">'+val+'</span>');
$(this).html(text);
});
//find values
var $rows = $zebraStripedTable.find('td .translation:contains('+ val +')');
$rows.closest('tr').show();
$rows.each(function() {
text = $(this).text().replace(val, '<span class="high">'+val+'</span>');
$(this).html(text);
});
// Update colors in remaining visible rows
$zebraStripedTable.removeClass('.table-striped')
.addClass('.table-striped');
}

function showEntryListMissing()
{
var $zebraStripedTable = $('.table-striped');
Expand Down Expand Up @@ -201,67 +227,81 @@
}
</style>

<h5>Stats</h5>

<div class="panel panel-info">
<div class="panel-heading">Stats</div>
{% if defaultLocale %}
<ul>
<li><a href="#" onclick="showEntryListAll()">Entries: {{ defaultLocale.getTranslations().count() }}</a></li>
<li><a href="#" onclick="showEntryListMissing()">Missing translations</a></li>
</ul>
<div class="list-groput">
<a href="#" onclick="showEntryListAll()" class="list-group-item">Entries: <span class="badge">{{ defaultLocale.getTranslations().count() }}</span></a>
<a href="#" onclick="showEntryListMissing()" class="list-group-item">Missing translations</a>
</div>
{% endif %}

{% endblock %}

{% block body %}
<form id="newtranslation" style="display: none" method="POST" onsubmit="return saveEntryForm($('#newtranslation'))" action="{{path('sg_localeditor_add_translation')}}">
<label>Domain:</label>
<select id="domain" name="domain" style="width: 500px">
{% for bundle in bundleList %}
<option value="{{bundle.getName()}}">{{bundle.getName()}}</option>
{% endfor %}
</select>
<br/>

<label>File Name:</label>
<input type="text" id="fileName" name="fileName" style="width: 700px"/>
<br/>

<label>Alias:</label>
<input type="text" id="alias" name="alias" style="width: 700px"/>
<br/>

{% for locale in localeList %}
<label>{{ locale }}:</label>
<textarea name="translations[{{ locale.getId() }}]" style="width: 700px; height: 100px"></textarea>
<br/>
{% endfor %}

<input type="submit" value="Save" class="btn btn-primary">
<input class="btn" type="button" value="Cancel" onclick="$('.alert').hide();$('#newtranslation').hide()">
</form>

<form id="newlocale" style="display: none" method="POST" onsubmit="return saveLocaleForm($('#newlocale'))" action="{{path('sg_localeditor_add_locale')}}">
<label>Language:</label>
<input type="text" id="language" name="language" maxlength="2" size="2"/>
<br />

<label>Country (optional):</label>
<input type="text" id="country" name="country" maxlength="2" size="2"/>
<br/>

<input type="submit" value="Save" class="btn btn-primary">
<input class="btn" type="button" value="Cancel" onclick="$('.alert').hide();$('#newlocale').hide()">
</form>
<div class="panel panel-success panel-top-form" id="newtranslation" style="display: none" >
<div class="panel-heading">New Entry</div>
<div class="panel-body">
<form method="POST" style="display:none" onsubmit="return saveEntryForm($('#newtranslation'))" action="{{path('sg_localeditor_add_translation')}}">
<div class="form-group input-group">
<label class="input-group-addon">Domain:</label>
<select id="domain" name="domain" class="form-control"/>
{% for bundle in bundleList %}
<option value="{{bundle.getName()}}">{{bundle.getName()}}</option>
{% endfor %}
</select>
</div>
<div class="form-group input-group">
<label class="input-group-addon">File Name:</label>
<input type="text" id="fileName" name="fileName" class="form-control"/>
</div>
<div class="form-group input-group">
<label class="input-group-addon">Alias:</label>
<input type="text" id="alias" name="alias" class="form-control"/>
</div>

{% for locale in localeList %}
<div class="form-group input-group">
<label class="input-group-addon">{{ locale }}:</label>
<textarea name="translations[{{ locale.getId() }}]" style="" class="form-control"></textarea>
</div>
{% endfor %}
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> &nbsp;Save</button>
<a class="btn btn-danger cancel-top-form"><i class="glyphicon glyphicon-remove"></i> &nbsp;Cancel</a>
</div>
</form>
</div>
</div>

<div class="panel panel-success panel-top-form" id="newlocale" style="display: none" >
<div class="panel-heading">New Locale</div>
<div class="panel-body">
<form method="POST" style="display:none" onsubmit="return saveLocaleForm($('#newlocale'))" action="{{path('sg_localeditor_add_locale')}}">
<div class="form-group input-group">
<label class="input-group-addon">Language:</label>
<input type="text" id="language" name="language" maxlength="2" size="2" class="form-control"/>
</div>
<div class="form-group input-group">
<label class="input-group-addon">Country (optional):</label>
<input type="text" id="country" name="country" maxlength="2" size="2" class="form-control"/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> &nbsp;Save</button>
<a class="btn btn-danger cancel-top-form"><i class="glyphicon glyphicon-remove"></i> &nbsp;Cancel</a>
</div>
</form>
</div>
</div>
<p id="insert-ok" class="alert alert-success" style="display: none"></p>
<p id="insert-error" class="alert alert-error" style="display: none">An error ocurred while adding the translation<span id="errmsg"></span></p>

<table class="table table-striped">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Domain</th>
<th>Alias</th>

{% for locale in localeList %}
<th>{{locale}} {% if locale == defaultLocale %}<span class="label">Default</span>{%endif%}</th>
{% endfor %}
Expand All @@ -274,19 +314,17 @@
{% for entry in entryList %}
<tr id="entry-{{loop.index}}" {{ entry.getTranslations().count() != localeListCount ? 'class="missing"' : 'class="ok"' }}>
<td>
<input id="remove-{{loop.index}}" class=" btn btn-danger mysmall" type="button" value="Remove" onclick="confirm('Are you sure?') && removeEntry('{{loop.index}}', '{{ entry.getId() }}')">
<button id="remove-{{loop.index}}" class="close" aria-hidden="true" data-placement="bottom" data-toggle="tooltip" title="Remove" onclick="confirm('Are you sure?') && removeEntry('{{loop.index}}', '{{ entry.getId() }}')">&times;</button>
</td>

<td>{{ entry.getDomain() }}</td>

<td>{{ entry.getAlias() }}</td>
<td class="domain">{{ entry.getDomain() }}</td>
<td class="alias">{{ entry.getAlias() }}</td>

{% for locale in localeList %}
<td>
<div id="current-{{loop.parent.loop.index}}-{{locale}}">
{% set translation = entry.getTranslation(locale) %}

<div id="current-{{loop.parent.loop.index}}-{{locale}}-content" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
<div class="translation" id="current-{{loop.parent.loop.index}}-{{locale}}-content" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
{% if translation %}{{ translation.getValue() }}{% endif %}
</div>

Expand All @@ -295,15 +333,16 @@
{% endif %}

{% if not translation or translation.getValue() is empty %}
<span class="label label-important" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">Missing</span>
<span class="label label-danger" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">Missing</span>
{% endif %}
</div>

<div id="editor-{{loop.parent.loop.index}}-{{locale}}" class="editor">
<textarea>{% if translation %}{{ translation.getValue() }}{% endif %}</textarea>
<br/>
<input id="save-{{loop.parent.loop.index}}-{{locale}}"class="btn mysmall btn-primary" type="button" value="Save" onclick="saveTranslation('{{loop.parent.loop.index}}-{{locale}}', '{{entry.getId()}}', '{{locale.getId()}}')">
<input class="btn mysmall" type="button" value="Cancel" onclick="hideTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
<div class="form-group">
<textarea class="form-control">{% if translation %}{{ translation.getValue() }}{% endif %}</textarea>
</div>
<input id="save-{{loop.parent.loop.index}}-{{locale}}"class="btn btn-sm btn-primary" type="button" value="Save" onclick="saveTranslation('{{loop.parent.loop.index}}-{{locale}}', '{{entry.getId()}}', '{{locale.getId()}}')">
<input class="btn btn-sm btn-danger" type="button" value="Cancel" onclick="hideTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
</div>
</td>
{% endfor %}
Expand Down
Loading