icon selector

openid-connect-server/src/main/webapp/resources/js/admin.js

@@ -1141,17 +1141,66 @@
     		if (!this.template) {
                 	this.template = _.template($('#tmpl-system-scope-form').html());
     		}
+    		if (!this.iconTemplate) {
+    			this.iconTemplate = _.template($('#tmpl-system-scope-icon').html());
+    		}
+    		
+    		// initialize our icon set into slices for the selector
+    		if (!this.bootstrapIcons) {
+    			this.bootstrapIcons = [];
+    			
+	    		var iconList = ['glass', 'music', 'search', 'envelope', 'heart', 'star',
+	    		                'star-empty', 'user', 'film', 'th-large', 'th', 'th-list', 'ok',
+	    		                'remove', 'zoom-in', 'zoom-out', 'off', 'signal', 'cog', 'trash',
+	    		                'home', 'file', 'time', 'road', 'download-alt', 'download',
+	    		                'upload', 'inbox', 'play-circle', 'repeat', 'refresh', 'list-alt',
+	    		                'lock', 'flag', 'headphones', 'volume-off', 'volume-down',
+	    		                'volume-up', 'qrcode', 'barcode', 'tag', 'tags', 'book',
+	                			'bookmark', 'print', 'camera', 'font', 'bold', 'italic',
+	                			'text-height', 'text-width', 'align-left', 'align-center',
+	                			'align-right', 'align-justify', 'list', 'indent-left',
+	                			'indent-right', 'facetime-video', 'picture', 'pencil',
+	                			'map-marker', 'tint', 'share', 'move', 'fast-backward', 'backward',
+	                			'pause', 'stop', 'forward', 'step-forward', 'eject',
+	                			'chevron-right', 'plus-sign', 'minus-sign', 'remove-sign',
+	                			'ok-sign', 'question-sign', 'info-sign', 'screenshot',
+	                			'remove-circle', 'ok-circle', 'ban-circle', 'arrow-left',
+	                			'arrow-right', 'arrow-down', 'share-alt', 'resize-full',
+	                			'resize-small', 'plus', 'asterisk', 'exclamation-sign', 'gift',
+	                			'leaf', 'fire', 'eye-close', 'plane', 'random', 'magnet',
+	                			'chevron-up', 'chevron-down', 'retweet', 'shopping-cart',
+	                			'folder-close', 'folder-open', 'resize-vertical',
+	                			'resize-horizontal', 'hdd', 'bell', 'thumbs-up', 'hand-right',
+	                			'hand-left', 'hand-down', 'circle-arrow-left', 'circle-arrow-up',
+	                			'circle-arrow-down', 'globe', 'tasks', 'briefcase' ];
+	    		
+	    		var size = 3;
+	    		while (iconList.length > 0) {
+	    			this.bootstrapIcons.push(iconList.splice(0, size));
+	    		}
+
+    		}
     	},
     	
     	events:{
     		'click .btn-save':'saveScope',
-    		'click .btn-cancel': function() {app.navigate('admin/scope', {trigger: true}); }
+    		'click .btn-cancel': function() {app.navigate('admin/scope', {trigger: true}); },
+    		'click .btn-icon':'selectIcon'
     	},
     	
     	saveScope:function(event) {
+    		
+    		var value = $('#value input').val()
+    		
+    		if (value == null || value.trim() == "") {
+    			// error: can't have a blank scope
+    			return false
+    		}
+    		
     		var valid = this.model.set({
-    			value:$('#value input').val(),
+    			value:value,
     			description:$('#description textarea').val(),
+    			icon:$('#iconDisplay input').val(),
     			defaultScope:$('#defaultScope input').is(':checked'),
     			allowDynReg:$('#allowDynReg input').is(':checked')
     		});
@@ -1172,9 +1221,28 @@
     		return false;
     	},
     	
+    	selectIcon:function(event) {
+    		
+    		var icon = event.target.value;
+    		
+    		$('#iconDisplay input').val(icon);
+    		$('#iconDisplay span').html(icon);
+    		$('#iconDisplay i').removeClass();
+    		$('#iconDisplay i').addClass('icon-' + icon);
+    		
+    		$('#iconSelector').modal('hide');
+    		
+    		return false;
+    	},
+    	
     	render: function(eventName) {
     		this.$el.html(this.template(this.model.toJSON()));
     		
+    		_.each(this.bootstrapIcons, function (items) {
+    			$(".modal-body", this.el).append(this.iconTemplate({items:items}));
+    		}, this);
+    		
+    		
     		return this;
     	}
     });

openid-connect-server/src/main/webapp/resources/template/admin.html

@@ -606,6 +606,34 @@
 				</div>
 			</div>
 
+			<div class="control-group" id="icon">
+				<label class="control-label">Icon</label>
+				<div class="controls">
+
+					<span id="iconDisplay">
+						<i class="icon-<%=icon%>"></i> <span class="uneditable-input"><%=icon%></span>
+
+						<input type="hidden" value="<%=icon%>">
+					</span>
+
+					<a href="#iconSelector" role="button" class="btn btn-info" data-toggle="modal"><i class="icon-white icon-picture"></i> Select an icon</a>
+
+					<div id="iconSelector" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="iconSelectorLabel" aria-hidden="true">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+							<h3 id="iconSelectorLabel">Select an Icon</h3>
+						</div>
+						<div class="modal-body">
+
+						</div>
+						<div class="modal-footer">
+							<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+						</div>
+					</div>
+				</div>
+
+			</div>
+
 			<div class="control-group" id="defaultScope">
 				<div class="controls">
 					<label class="checkbox">
@@ -632,3 +660,25 @@
 		</fieldset>
 	</form>
 </script>
+
+<script type="text/html" id="tmpl-system-scope-icon">
+
+	<div class="row-fluid">
+		<div class="span4" style="margin-top: 5px; margin-bottom: 5px;">
+			<% if (items[0]) { %>
+			<button class="btn btn-block btn-icon" value="<%=items[0]%>"><i class="icon-<%=items[0]%>"></i> <%=items[0]%>
+			<% } %>
+		</div>
+		<div class="span4" style="margin-top: 5px; margin-bottom: 5px;">
+			<% if (items[1]) { %>
+			<button class="btn btn-block btn-icon" value="<%=items[1]%>"><i class="icon-<%=items[1]%>"></i> <%=items[1]%>
+			<% } %>
+		</div>
+		<div class="span4" style="margin-top: 5px; margin-bottom: 5px;">
+			<% if (items[2]) { %>
+			<button class="btn btn-block btn-icon" value="<%=items[2]%>"><i class="icon-<%=items[2]%>"></i> <%=items[2]%>
+			<% } %>
+		</div>
+	</div>
+
+</script>