From aad5163b493ce499875dbc0bde845792e53562e7 Mon Sep 17 00:00:00 2001
From: ridiculousfish <corydoras@ridiculousfish.com>
Date: Tue, 29 Jul 2014 11:00:39 -0700
Subject: [PATCH] Make prompt selection more like color selection in
 fish_config. Remove the "show prompt source" button.

---
 share/tools/web_config/fishconfig.css       | 34 ++++++++++++---------
 share/tools/web_config/js/controllers.js    | 17 +++++++++--
 share/tools/web_config/partials/colors.html |  2 +-
 share/tools/web_config/partials/prompt.html | 20 +++++++++---
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/share/tools/web_config/fishconfig.css b/share/tools/web_config/fishconfig.css
index f018e4edc..d2eb8fc73 100644
--- a/share/tools/web_config/fishconfig.css
+++ b/share/tools/web_config/fishconfig.css
@@ -349,22 +349,23 @@ body {
 	cursor: pointer;
 }
 
-.color_scheme_choice_label {
+.color_scheme_choice_label, .prompt_demo_choice_label {
 	margin-left: 10px;
 	margin-bottom: 3px;
 	cursor: pointer;
 	font-size: 12pt;
 	white-space: normal;
+	color: #AAA;
 }
 
-.color_scheme_choices_scrollview {
+.color_scheme_choices_scrollview, .prompt_choices_scrollview {
 	 border-top: 1px solid #333;
 	 padding-top: 5px;
 	 overflow: scroll;
-	 max-height: 18em; /* about two and a half boxes */
+	 max-height: 30em; /* about two and a half boxes */
 }
 
-.color_scheme_choices_list {
+.color_scheme_choices_list, .prompt_choices_list {
 	overflow-y: hidden; /* makes our height account for floats */
 	padding:  0 10px 15px 10px;  /* top right bottom left */
 	bottom: 0px;
@@ -418,17 +419,26 @@ img.delete_icon {
 	color: #C8C8C8;
 }
 
-.prompt_demo {
+.prompt_demo, .current_prompt {
 	font-size: 12pt;
 	padding: 10px;
-	margin: 5px 20px 25px; /* top right bottom left */
+	margin: 5px 5px 25px 5px; /* top right bottom left */
 	cursor: pointer;
 	line-height: 1.8em;
-	border: solid #777 1px;
+	border: solid #333 1px;
 	position: relative; /* so that our absolutely positioned elements work */
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
-.save_button, .prompt_save_button, .colors_close_button, .customize_theme_button {
+.unbordered {
+	border: none;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.save_button, .prompt_save_button, .colors_close_button, .customize_theme_button, .generic_button {
 	border-radius: 5px;
 	border: solid rgba(71,71,71,0.5) 1px;
 	padding: 5px 8px;
@@ -440,7 +450,7 @@ img.delete_icon {
 	cursor: pointer;
 }
 
-.save_button:hover, .customize_theme_button:hover {
+.save_button:hover, .customize_theme_button:hover, .generic_button:hover {
 	border-color: rgba(71,71,71,0.9);
 }
 
@@ -456,12 +466,6 @@ img.delete_icon {
 	font-size: 12pt;
 }
 
-.prompt_demo_choice_label {
-	margin: 25px 20px 5px;
-	font-size: 12pt;
-	white-space: normal;
-}
-
 .prompt_demo_text {
 	white-space: pre;
 	line-height: 170%;
diff --git a/share/tools/web_config/js/controllers.js b/share/tools/web_config/js/controllers.js
index 796e7729a..7db84a35a 100644
--- a/share/tools/web_config/js/controllers.js
+++ b/share/tools/web_config/js/controllers.js
@@ -120,6 +120,8 @@ controllers.controller("colorsController", function($scope, $http) {
 
 controllers.controller("promptController", function($scope, $http) {
     $scope.selectedPrompt = null;
+    $scope.showSaveButton = true;
+    $scope.savePromptButtonTitle = "Set Prompt";
 
     $scope.fetchSamplePrompts= function() {
         $http.get("/sample_prompts/").success(function(data, status, headers, config) {
@@ -131,8 +133,10 @@ controllers.controller("promptController", function($scope, $http) {
             }
         })};
 
-    $scope.selectPrompt = function(promptt) {
-        $scope.selectedPrompt= promptt;
+    $scope.selectPrompt = function(prompt) {
+        $scope.selectedPrompt= prompt;
+        
+        $scope.savePromptButtonTitle = "Set Prompt";
     }
 
     $scope.setNewPrompt = function(selectedPrompt) {
@@ -143,9 +147,18 @@ controllers.controller("promptController", function($scope, $http) {
             $scope.samplePrompts[0].function = selectedPrompt.function;
             $scope.samplePrompts[0].font_size = selectedPrompt.font_size;
             $scope.selectedPrompt = $scope.samplePrompts[0];
+
+            // Note that we set it
+            $scope.savePromptButtonTitle = "Prompt Set!";
         })};
 
     $scope.fetchSamplePrompts();
+
+    $scope.setPrompt = function() {
+        if ($scope.selectedPrompt) {
+            $scope.setNewPrompt($scope.selectedPrompt);
+        }
+    }
 });
 
 controllers.controller("functionsController", function($scope, $http) {
diff --git a/share/tools/web_config/partials/colors.html b/share/tools/web_config/partials/colors.html
index 3738ec2b8..9a3730cf4 100644
--- a/share/tools/web_config/partials/colors.html
+++ b/share/tools/web_config/partials/colors.html
@@ -124,7 +124,7 @@ fish cannot change the background color of your terminal. Refer to your terminal
 			<div class="color_scheme_choice_container" data-ng-repeat="colorScheme in colorSchemes" ng-click="changeSelectedColorScheme(colorScheme)">
 				<div class="color_scheme_choice_label">
 					<!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
-					<span style="color: #AAA">{{colorScheme.name}}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a-->
+					{{colorScheme.name}}<!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a-->
 				</div>
 				<div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': colorScheme.preferred_background}">
 					<span data-ng-style="{'color': colorScheme.command}">/bright/vixens</span>
diff --git a/share/tools/web_config/partials/prompt.html b/share/tools/web_config/partials/prompt.html
index e11da923c..fed161413 100644
--- a/share/tools/web_config/partials/prompt.html
+++ b/share/tools/web_config/partials/prompt.html
@@ -1,10 +1,20 @@
-<div style="padding: 0 10px 15px;">
+<!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
+<div class="current_prompt" style="min-height: 7.5em">
+	<div class="prompt_demo_choice_label">{{ selectedPrompt.name }}</div>
+	<div ng-bind-html-unsafe='selectedPrompt.demo' class="prompt_demo unbordered"></div>
+	<div style="position: absolute; right: 5px; bottom: 5px; color:">
+		<span class="save_button"
+			  ng-show="showSaveButton"
+			  style="color: #777"
+			  ng-click="setPrompt()">{{ savePromptButtonTitle }}</span>
+	</div>
+</div>
+<div style="margin: 10px 0 7px 35px;">Select a prompt below:</div>
+<div class="prompt_choices_scrollview">
+<div class="prompt_choices_list">
     <div ng-repeat="prompt in samplePrompts">
         <div class="prompt_demo_choice_label">{{ prompt.name }}</div>
         <div ng-bind-html-unsafe='prompt.demo' class="prompt_demo" ng-click="selectPrompt(prompt)"></div>
-        <div class="prompt_function" ng-show="selectedPrompt == prompt">
-            <div class="prompt_function_text">{{ prompt.function }}</div>
-        </div>
-        <span class="prompt_save_button" ng-click="setNewPrompt(selectedPrompt)" ng-show="selectedPrompt == prompt && selectedPrompt != samplePrompts[0]">Use</span>
     </div>
 </div>
+</div>