SAK-42170 Resource picker: UI improvements (sakaiproject#7136)

* SAK-42170 Resource picker: UI improvements
elhakimfirdaus · Jul 23, 2019 · 05b8eb0 · 05b8eb0
1 parent ba9eed5
commit 05b8eb0
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 30 deletions.
diff --git a/content/content-tool/tool/src/bundle/helper.properties b/content/content-tool/tool/src/bundle/helper.properties
@@ -63,9 +63,9 @@ att.menu.end		= End of menu
 att.select      = Select
 att.sellistcap  = List of selections
 att.sellistsum  = Tabled list of resources you have elected to attach. First column lists the item, second column a link to remove it from the selection.
-att.upl 		= Upload local file
+att.upl 		= Upload a local file
 addi.url     	= URL (link to website)
-addi.or.url     = or a URL (link to website)
+addi.or.url     = Link to website
 
 gen.actions     = Actions
 gen.add         = Add

diff --git a/content/content-tool/tool/src/webapp/vm/content/sakai_filepicker_attach.vm b/content/content-tool/tool/src/webapp/vm/content/sakai_filepicker_attach.vm
@@ -1,4 +1,20 @@
 <!-- sakai_filepicker_attach.vm, version: Id:  $, use with org.sakaiproject.content.tool.FilePickerAction.java -->
+
+<style type="text/css">
+	#resourceTabs {
+		margin-left: 3px;
+		margin-right: 3px;
+	}
+
+	.joinLabel{
+		margin: -1px 0px 0px -1px;
+	}
+
+	.joinLabel .act {
+		margin: 15px;
+	}
+</style>
+
 <script type="text/javascript">
 	<!--
 		function openCopyrightWindow(theURL,winName,winSettings) 
@@ -60,6 +76,15 @@
 	}
 	</script>
 
+	<script>
+		document.addEventListener("DOMContentLoaded", function(event){ 
+			$('#resourceTabs a').click(function (e) {
+				e.preventDefault();
+				$(this).tab('show');
+			});
+		});
+	</script>
+
 	<form name="attachForm" id="attachForm" action="#toolForm("FilePickerAction" "Main")" method="post" enctype="multipart/form-data">
 		<input type="hidden" name="source" value="0" />
 		<input type="hidden" name="collectionId" value="$validator.escapeHtml($collectionId)" />
@@ -101,38 +126,51 @@
 		</div>
 
 		#end	
+
+		<ul class="nav nav-tabs" id="resourceTabs">
+			<li class="nav-item active">
+				<a class="nav-link" href="#pickerUploadOption">$tlang.getString("att.upl")</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" href="#pickerShareLinkOption">$tlang.getString("addi.or.url")</a>
+			</li>
+		</ul>
+
 		<div class="container_filepicker">
-
-			<div class="form-inline">
-				<div class="form-group">
-				    <label for="upload">$tlang.getString("att.upl")</label>
-				    <input type="file" name="upload" id="upload" class="upload" onchange="showNotif('submitnotifxxx','attachButton1','attachForm'); document.getElementById('attachForm').action='#toolLinkParam("FilePickerAction" "doAttachupload" "special=upload&sakai_csrf_token=$validator.escapeUrl($sakai_csrf_token)")';submitform('attachForm');" #if($disable_attach_links) disabled="disabled"#end />
-					<span id="submitnotifxxx" class="messageProgress" style="visibility:hidden">$tlang.getString("processmessage.file")</span>
-				</div>	
-				<div class="form-group">
-					<span id="submitnotifxxx" class="messageProgress" style="visibility:hidden">$tlang.getString("processmessage.file")</span>
+			<div class="tab-content panel panel-default joinLabel">
+				<div role="tabpanel" class="tab-pane active panel-body" id="pickerUploadOption">
+					<div class="form-inline">
+						<div class="form-group">
+						    <label for="upload">$tlang.getString("att.upl")</label>
+						    <input type="file" name="upload" id="upload" class="upload" onchange="showNotif('submitnotifxxx','attachButton1','attachForm'); document.getElementById('attachForm').action='#toolLinkParam("FilePickerAction" "doAttachupload" "special=upload&sakai_csrf_token=$validator.escapeUrl($sakai_csrf_token)")';submitform('attachForm');" #if($disable_attach_links) disabled="disabled"#end />
+							<span id="submitnotifxxx" class="messageProgress" style="visibility:hidden">$tlang.getString("processmessage.file")</span>
+						</div>
+						<div class="form-group">
+							<span id="submitnotifxxx" class="messageProgress" style="visibility:hidden">$tlang.getString("processmessage.file")</span>
+						</div>
+					</div>
 				</div>
-			</div>
-
-			<div class="form-inline">
-				<div class="form-group">
-					<label for="url">$tlang.getString("addi.or.url")</label>
-					<input type="text" size="40" name="url" id="url" onkeypress="document.getElementById('add_url').disabled=false;" onchange="document.getElementById('add_url').disabled=true;document.getElementById('attachForm').action='#toolLinkParam("FilePickerAction" "doAttachurl" "special=upload")';submitform('attachForm');" #if($disable_attach_links) disabled="disabled"#end />
-				</div>	
-				<div class="form-group">
-					<span class="act"><input type="button" class="button" name="add_url" id="add_url" value="$tlang.getString("gen.add")" onclick="document.getElementById('attachForm').action='#toolLinkParam("FilePickerAction" "doAttachurl" "special=upload")';submitform('attachForm');" disabled="disabled" /></span>
+				<div role="tabpanel" class="tab-pane panel-body" id="pickerShareLinkOption">
+					<div class="form-inline">
+						<div class="form-group">
+							<label for="url">$tlang.getString("addi.or.url")</label>
+							<input type="text" size="40" name="url" id="url" onkeypress="document.getElementById('add_url').disabled=false;" onchange="document.getElementById('add_url').disabled=true;document.getElementById('attachForm').action='#toolLinkParam("FilePickerAction" "doAttachurl" "special=upload")';submitform('attachForm');" #if($disable_attach_links) disabled="disabled"#end />
+						</div>
+						<div class="form-group">
+							<span class="act"><input type="button" class="button" name="add_url" id="add_url" value="$tlang.getString("gen.add")" onclick="document.getElementById('attachForm').action='#toolLinkParam("FilePickerAction" "doAttachurl" "special=upload")';submitform('attachForm');" disabled="disabled" /></span>
+						</div>
+					</div>
 				</div>
+				<p class="act" style="clear:both">
+					<label for="attachButton1" class="sr-only">$tlang.getString("att.explainfinish")</label>
+					<input type="button" name="attachButton1" id="attachButton1"  accesskey="s"
+						onclick="SPNR.disableControlsAndSpin( this, null ); document.getElementById('attachForm').action='#toolLink("FilePickerAction" "doAddattachments")'; submitform('attachForm');"
+						value="$tlang.getString("att.finish")" #if($list_has_changed) class="active" #else disabled="disabled" #end />
+					<input type="button" name="cancelButton" id="cancelButton"  accesskey="x" class="cancelButton"
+						onclick=" document.getElementById('attachForm').action='#toolLink("FilePickerAction" "doCancel")'; submitform('attachForm');"
+						value="$tlang.getString("att.cancel")"/>
+				</p>
 			</div>
-
-			<p class="act" style="clear:both">
-				<label for="attachButton1" class="sr-only">$tlang.getString("att.explainfinish")</label>
-				<input type="button" name="attachButton1" id="attachButton1"  accesskey="s"
-					onclick="SPNR.disableControlsAndSpin( this, null ); document.getElementById('attachForm').action='#toolLink("FilePickerAction" "doAddattachments")'; submitform('attachForm');" 
-					value="$tlang.getString("att.finish")" #if($list_has_changed) class="active" #else disabled="disabled" #end />
-				<input type="button" name="cancelButton" id="cancelButton"  accesskey="x" class="cancelButton"
-					onclick=" document.getElementById('attachForm').action='#toolLink("FilePickerAction" "doCancel")'; submitform('attachForm');" 
-					value="$tlang.getString("att.cancel")"  />
-			</p>
 
 		</div>