cleanup connedit

4 files changed, 252 insertions, 150 deletions

diff --git a/view/tpl/abook_edit.tpl b/view/tpl/abook_edit.tpl
index d118cbb9c..202c6881e 100755
--- a/view/tpl/abook_edit.tpl
+++ b/view/tpl/abook_edit.tpl
@@ -1,140 +1,211 @@
-<div class="generic-content-wrapper-styled">
-<h2>{{$header}}</h2>
-
-<h3>{{$addr}}</h3>
-
-{{if $notself}}
-<div id="connection-flag-tabs">
-{{$tabs}}
-</div>
-<div id="connection-edit-buttons">
-{{foreach $buttons as $b }}
-<button class="btn btn-sm btn-default" title="{{$b.title}}" onclick="window.location.href='{{$b.url}}'; return false;">{{$b.label}}</button>
-{{/foreach}}
-{{/if}}
-
-
-<div id="contact-edit-wrapper">
-<form id="abook-edit-form" action="connedit/{{$contact_id}}" method="post" >
-
-<div class="abook-permsnew" style="display: none;">
-<div class="abook-perms-msg">{{$perms_step1}}</div>
-</div>
-
-<div class="abook-permsmsg" style="display: none;">
-<div class="abook-perms-msg">{{$perms_new}}</div>
-</div>
-
-
-<div class="abook-permssave" style="display: none;">
-<input class="contact-edit-submit" type="submit" name="done" value="{{$submit}}" />
-</div>
-
-{{if $last_update}}
-{{$lastupdtext}} {{$last_update}}
-{{/if}}
-
-
-{{if $is_pending}}
-<div class="abook-pending-contact">
-{{include file="field_checkbox.tpl" field=$unapproved}}
-</div>
-{{/if}}
-
-
-{{if $notself}}
-{{if $slide}}
-<h3>{{$lbl_slider}}</h3>
-
-{{$slide}}
-
-{{/if}}
-
-{{if $connfilter}}
-	{{include file="field_textarea.tpl" field=$incl}}
-	{{include file="field_textarea.tpl" field=$excl}}
-{{else}}
-	<input type="hidden" name="{{$incl.0}}" value="{{$incl.2}}" />
-	<input type="hidden" name="{{$excl.0}}" value="{{$excl.2}}" />
-{{/if}}
-
-{{if $rating}}
-<h3>{{$lbl_rating}}</h3>
-
-{{$rating}}
-
-
-{{/if}}
-
-
-
-{{/if}}
-
-
-{{if $self}}
-<div class="abook-autotext">
-<div id="autoperm-desc" class="descriptive-paragraph">{{$autolbl}}</div>
-{{include file="field_checkbox.tpl" field=$autoperms}}
-</div>
-{{/if}}
-
-<input type="hidden" name="contact_id" value="{{$contact_id}}">
-<input id="contact-closeness-mirror" type="hidden" name="closeness" value="{{$close}}" />
-<input id="contact-rating-mirror" type="hidden" name="rating" value="{{$rating_val}}" />
-
-
-{{if $rating}}
-{{if $notself}}
-	{{include file="field_textarea.tpl" field=$rating_text}}
-{{/if}}
-{{/if}}
-
-{{if $notself}}
-{{if $multiprofs }}
-<div>
-<h3>{{$lbl_vis1}}</h3>
-<div>{{$lbl_vis2}}</div>
-
-{{$profile_select}}
-</div>
-{{/if}}
-{{/if}}
-
-<h3>{{$permlbl}}</h3>
-
-{{if $notself}}
-<div id="connedit-perms-wrap" class="fakelink" onclick="openClose('connedit-perms');">{{$clickme}}</div>
-<div id="connedit-perms" style="display: none;" >
-{{/if}}
- 
-<div id="perm-desc" class="descriptive-text">{{$permnote}}</div>
-<table>
-<tr><td></td><td class="abook-them">{{$them}}</td><td colspan="2" class="abook-me">{{$me}}</td><td></td></tr>
-<tr><td colspan="5"><hr /></td></tr>
-{{foreach $perms as $prm}}
-{{include file="field_acheckbox.tpl" field=$prm}}
-{{/foreach}}
-<tr><td colspan="5"><hr /></td></tr>
-</table>
-
-</div>
-
-{{if $notself}}
-</div>
-{{/if}}
-
-<input class="contact-edit-submit" type="submit" name="done" value="{{$submit}}" />
-
-{{if $self && $noperms}}
-<script>		
-	if(typeof(connectDefaultShare) !== 'undefined')
-		connectDefaultShare();
-	else
-		connectFullShare();
-	abook_perms_msg();
-</script>
-{{/if}}
-
-</form>
-</div>
+<div class="generic-content-wrapper">
+	<div class="section-title-wrapper">
+		{{if $notself}}
+		<div class="dropdown pull-right">
+			<button id="connection-dropdown" class="btn btn-default btn-xs" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<i class="icon-caret-down"></i>
+			</button>
+			<ul class="dropdown-menu" aria-labelledby="dLabel">
+				<li><a  href="{{$buttons.view.url}}" title="{{$buttons.view.title}}">{{$buttons.view.label}}</a></li>
+				<li><a  href="{{$buttons.recent.url}}" title="{{$buttons.recent.title}}">{{$buttons.recent.label}}</a></li>
+				<li class="divider"></li>
+				<li><a  href="#" title="{{$buttons.refresh.title}}" onclick="window.location.href='{{$buttons.refresh.url}}'; return false;">{{$buttons.refresh.label}}</a></li>
+				<li><a  href="#" title="{{$buttons.block.title}}" onclick="window.location.href='{{$buttons.block.url}}'; return false;">{{$buttons.block.label}}</a></li>
+				<li><a  href="#" title="{{$buttons.ignore.title}}" onclick="window.location.href='{{$buttons.ignore.url}}'; return false;">{{$buttons.ignore.label}}</a></li>
+				<li><a  href="#" title="{{$buttons.archive.title}}" onclick="window.location.href='{{$buttons.archive.url}}'; return false;">{{$buttons.archive.label}}</a></li>
+				<li><a  href="#" title="{{$buttons.hide.title}}" onclick="window.location.href='{{$buttons.hide.url}}'; return false;">{{$buttons.hide.label}}</a></li>
+				<li><a  href="#" title="{{$buttons.delete.title}}" onclick="window.location.href='{{$buttons.delete.url}}'; return false;">{{$buttons.delete.label}}</a></li>
+			</ul>
+		</div>
+		{{/if}}
+		<h2>{{$header}}</h2>
+	</div>
+	<div class="section-content-wrapper-np">
+		{{if $notself}}
+		<div class="section-content-info-wrapper">
+			<div>
+				{{$addr_text}} <strong>'{{$addr}}'</strong>
+			</div>
+			{{if $last_update}}
+			<div>
+				{{$lastupdtext}} {{$last_update}}
+			</div>
+			{{/if}}
+		</div>
+		{{/if}}
+
+		<form id="abook-edit-form" action="connedit/{{$contact_id}}" method="post" >
+
+		<input type="hidden" name="contact_id" value="{{$contact_id}}">
+
+		<div class="panel-group" id="contact-edit-tools" role="tablist" aria-multiselectable="true">
+			{{if $notself}}
+
+			{{if $is_pending}}
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="pending-tool">
+					<h3>
+						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#pending-tool-collapse" aria-expanded="true" aria-controls="pending-tool-collapse">
+							Connection Pending Approval
+						</a>
+					</h3>
+				</div>
+				<div id="pending-tool-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="pending-tool">
+					<div class="section-content-tools-wrapper">
+						{{include file="field_checkbox.tpl" field=$unapproved}}
+						<div class="settings-submit-wrapper" >
+							<button type="submit" name="done" value="{{$submit}}" class="btn btn-primary">{{$submit}}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="modal" id="abook-pending-modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+							<h4 class="modal-title" id="myModalLabel">Connection Request</h4>
+						</div>
+						<div class="modal-body">
+							<strong>{{$name}}</strong> ({{$addr}}) would like to connect with you. Please approve this connection to allow communication.
+						</div>
+						<div class="modal-footer">
+							<button class="btn btn-sm btn-danger pull-left" title="{{$buttons.delete.title}}" onclick="window.location.href='{{$buttons.delete.url}}'; return false;">{{$buttons.delete.label}}</button>
+							<button type="button" class="btn btn-default" data-dismiss="modal">Approve Later</button>
+							<button type="submit" class="btn btn-primary" name="pending" value="1">Approve</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<script>$('#abook-pending-modal').modal('show');</script>
+			{{/if}}
+
+			{{if $affinity }}
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="affinity-tool">
+					<h3>
+						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#affinity-tool-collapse" aria-expanded="true" aria-controls="affinity-tool-collapse">
+							{{$affinity }}
+						</a>
+					</h3>
+				</div>
+				<div id="affinity-tool-collapse" class="panel-collapse collapse{{if !$is_pending}} in{{/if}}" role="tabpanel" aria-labelledby="affinity-tool">
+					<div class="section-content-tools-wrapper">
+						{{if $slide}}
+						<div class="form-group"><strong>{{$lbl_slider}}</strong></div>
+						{{$slide}}
+						<input id="contact-closeness-mirror" type="hidden" name="closeness" value="{{$close}}" />
+						{{/if}}
+
+						{{if $multiprofs }}
+						<div class="form-group">
+							<strong>{{$lbl_vis2}}</strong>
+							{{$profile_select}}
+						</div>
+						{{/if}}
+						<div class="settings-submit-wrapper" >
+							<button type="submit" name="done" value="{{$submit}}" class="btn btn-primary">{{$submit}}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			{{/if}}
+
+			{{if $connfilter}}
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="fitert-tool">
+					<h3>
+						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#fitert-tool-collapse" aria-expanded="true" aria-controls="fitert-tool-collapse">
+							Custom Filter
+						</a>
+					</h3>
+				</div>
+				<div id="fitert-tool-collapse" class="panel-collapse collapse{{if !$is_pending && !($slide || $multiprofs)}} in{{/if}}" role="tabpanel" aria-labelledby="fitert-tool">
+					<div class="section-content-tools-wrapper">
+						{{include file="field_textarea.tpl" field=$incl}}
+						{{include file="field_textarea.tpl" field=$excl}}
+						<div class="settings-submit-wrapper" >
+							<button type="submit" name="done" value="{{$submit}}" class="btn btn-primary">{{$submit}}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			{{else}}
+			<input type="hidden" name="{{$incl.0}}" value="{{$incl.2}}" />
+			<input type="hidden" name="{{$excl.0}}" value="{{$excl.2}}" />
+			{{/if}}
+
+			{{if $rating}}
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="rating-tool">
+					<h3>
+						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#rating-tool-collapse" aria-expanded="true" aria-controls="rating-tool-collapse">
+							{{$lbl_rating}}
+						</a>
+					</h3>
+				</div>
+				<div id="rating-tool-collapse" class="panel-collapse collapse{{if !$is_pending && !($slide || $multiprofs) && !$connfilter}} in{{/if}}" role="tabpanel" aria-labelledby="rating-tool">
+					<div class="section-content-tools-wrapper">
+						<div class="section-content-warning-wrapper">
+							{{$rating_info}}
+						</div>
+						<div class="form-group"><strong>{{$lbl_rating_label}}</strong></div>
+						{{$rating}}
+						{{include file="field_textarea.tpl" field=$rating_text}}
+						<input id="contact-rating-mirror" type="hidden" name="rating" value="{{$rating_val}}" />
+						<div class="settings-submit-wrapper" >
+							<button type="submit" name="done" value="{{$submit}}" class="btn btn-primary">{{$submit}}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			{{/if}}
+
+			{{/if}}
+
+			<div class="panel">
+				{{if $notself}}
+				<div class="section-subtitle-wrapper" role="tab" id="perms-tool">
+					<h3>
+						<a data-toggle="collapse" data-parent="#contact-edit-tools" href="#perms-tool-collapse" aria-expanded="true" aria-controls="perms-tool-collapse">
+							{{$permlbl}}
+						</a>
+					</h3>
+				</div>
+				{{/if}}
+				<div id="perms-tool-collapse" class="panel-collapse collapse{{if $self}} in{{/if}}" role="tabpanel" aria-labelledby="perms-tool">
+					<div class="section-content-tools-wrapper">
+						<div class="section-content-warning-wrapper">
+						{{$permnote}}
+						</div>
+
+						<table id="perms-tool-table" class=form-group>
+							<tr>
+								<td></td>
+								{{if $notself}}
+								<td class="abook-them">{{$them}}</td>
+								{{/if}}
+								<td colspan="2" class="abook-me">{{$me}}</td>
+							</tr>
+							{{foreach $perms as $prm}}
+							{{include file="field_acheckbox.tpl" field=$prm}}
+							{{/foreach}}
+						</table>
+
+						{{if $self}}
+						<div>
+							<div>{{$autolbl}}</div>
+							{{include file="field_checkbox.tpl" field=$autoperms}}
+						</div>
+						{{/if}}
+
+						<div class="settings-submit-wrapper" >
+							<button type="submit" name="done" value="{{$submit}}" class="btn btn-primary">{{$submit}}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		</form>
+	</div>
 </div>
diff --git a/view/tpl/contact_slider.tpl b/view/tpl/contact_slider.tpl
index 5c15e1c2c..550abc147 100755
--- a/view/tpl/contact_slider.tpl
+++ b/view/tpl/contact_slider.tpl
@@ -1,4 +1,20 @@
-<div id="contact-slider" class="slider" style="height: 32px; position: relative; left: 5%; width: 90%;"><input id="contact-range" type="text" name="fake-closeness" value="{{$val}}" /></div>
+<div id="contact-slider" class="slider form-group"><input id="contact-range" type="text" name="fake-closeness" value="{{$val}}" /></div>
 <script>
-	$("#contact-range").jRange({ from: {{$min|default:'0'}}, to: 99, step: 1, scale: [{{$labels}}], width:'100%', showLabels: false, onstatechange: function(v) { $("#contact-closeness-mirror").val(v); }  });
+$(document).ready(function() {
+	// The slider does not render correct if width is given in % and
+	// the slider container is hidden (display: none) during rendering.
+	// So let's unhide it to render and hide again afterwards.
+	if(!$("#affinity-tool-collapse").hasClass("in")) {
+		$("#affinity-tool-collapse").addClass("in");
+		makeContactSlider();
+		$("#affinity-tool-collapse").removeClass("in");
+	}
+	else {
+		makeContactSlider();
+	}
+});
+
+function makeContactSlider() {
+	$("#contact-range").jRange({ from: {{$min|default:'0'}}, to: 99, step: 1, scale: [{{$labels}}], width:'98%', showLabels: false, onstatechange: function(v) { $("#contact-closeness-mirror").val(v); }  });
+}
 </script>
diff --git a/view/tpl/field_acheckbox.tpl b/view/tpl/field_acheckbox.tpl
index 816af2a65..a4f271f1a 100755
--- a/view/tpl/field_acheckbox.tpl
+++ b/view/tpl/field_acheckbox.tpl
@@ -1,17 +1,17 @@
-<tr>
+<tr class="highlight">
 	<td>
-		<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
+		<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label><br>
+		<span class='field_abook_help'>{{$field.6}}</span>
 	</td>
+	{{if $notself}}
 	<td class="abook-them">
 		<input type="checkbox" name='them_{{$field.0}}' id='them_id_{{$field.0}}' value="1" disabled="disabled" {{if $field.2}}checked="checked"{{/if}} />
 	</td>
+	{{/if}}
 	<td class="abook-me">
-		<input type="checkbox" name='{{$field.0}}' class='abook-edit-me' id='me_id_{{$field.0}}' value="{{$field.4}}" {{if $field.3}}checked="checked"{{/if}} />
+		<input type="checkbox" name='{{$field.0}}' class='abook-edit-me' id='me_id_{{$field.0}}' value="{{$field.4}}" {{if $field.3}}checked="checked"{{/if}}{{if $field.5}} disabled="disabled"{{/if}} />
 	</td>
 	<td>
 		{{if $field.5}}<span class="permission-inherited">{{$inherited}}</span> {{/if}}
 	</td>
-	<td>
-		<span class='field_abook_help'>{{$field.6}}</span>
-	</td>
-</tr>
\ No newline at end of file
+</tr>
diff --git a/view/tpl/rating_slider.tpl b/view/tpl/rating_slider.tpl
index 4702fc65b..4c36504e6 100644
--- a/view/tpl/rating_slider.tpl
+++ b/view/tpl/rating_slider.tpl
@@ -1,4 +1,19 @@
-<div id="rating-slider" class="slider" style="height: 32px; position: relative; left: 5%; width: 90%;"><input id="rating-range" type="text" name="fake-rating" value="{{$val}}" /></div>
+<div id="rating-slider" class="slider form-group"><input id="rating-range" type="text" name="fake-rating" value="{{$val}}" /></div>
 <script>
-	$("#rating-range").jRange({ from: -10, to: 10, step: 1, width:'100%', showLabels: false, showScale: true, scale : [ '-10','-8','-6','-4','-2','0','2','4','6','8','10' ], onstatechange: function(v) { $("#contact-rating-mirror").val(v); }  });
+$(document).ready(function() {
+	// The slider does not render correct if width is given in % and
+	// the slider container is hidden (display: none) during rendering.
+	// So let's unhide it to render and hide again afterwards.
+	if(!$("#rating-tool-collapse").hasClass("in")) {
+		$("#rating-tool-collapse").addClass("in");
+		makeRatingSlider();
+		$("#rating-tool-collapse").removeClass("in");
+	}
+	else {
+		makeRatingSlider();
+	}
+});
+function makeRatingSlider() {
+	$("#rating-range").jRange({ from: -10, to: 10, step: 1, width:'98%', showLabels: false, showScale: true, scale : [ '-10','-8','-6','-4','-2','0','2','4','6','8','10' ], onstatechange: function(v) { $("#contact-rating-mirror").val(v); }  });
+}
 </script>