Make prompt selection more like color selection in fish_config. Remove

the "show prompt source" button.
This commit is contained in:
ridiculousfish 2014-07-29 11:00:39 -07:00
parent 6d18bf5cd4
commit aad5163b49
4 changed files with 50 additions and 23 deletions

View file

@ -349,22 +349,23 @@ body {
cursor: pointer; cursor: pointer;
} }
.color_scheme_choice_label { .color_scheme_choice_label, .prompt_demo_choice_label {
margin-left: 10px; margin-left: 10px;
margin-bottom: 3px; margin-bottom: 3px;
cursor: pointer; cursor: pointer;
font-size: 12pt; font-size: 12pt;
white-space: normal; white-space: normal;
color: #AAA;
} }
.color_scheme_choices_scrollview { .color_scheme_choices_scrollview, .prompt_choices_scrollview {
border-top: 1px solid #333; border-top: 1px solid #333;
padding-top: 5px; padding-top: 5px;
overflow: scroll; 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 */ overflow-y: hidden; /* makes our height account for floats */
padding: 0 10px 15px 10px; /* top right bottom left */ padding: 0 10px 15px 10px; /* top right bottom left */
bottom: 0px; bottom: 0px;
@ -418,17 +419,26 @@ img.delete_icon {
color: #C8C8C8; color: #C8C8C8;
} }
.prompt_demo { .prompt_demo, .current_prompt {
font-size: 12pt; font-size: 12pt;
padding: 10px; padding: 10px;
margin: 5px 20px 25px; /* top right bottom left */ margin: 5px 5px 25px 5px; /* top right bottom left */
cursor: pointer; cursor: pointer;
line-height: 1.8em; line-height: 1.8em;
border: solid #777 1px; border: solid #333 1px;
position: relative; /* so that our absolutely positioned elements work */ 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-radius: 5px;
border: solid rgba(71,71,71,0.5) 1px; border: solid rgba(71,71,71,0.5) 1px;
padding: 5px 8px; padding: 5px 8px;
@ -440,7 +450,7 @@ img.delete_icon {
cursor: pointer; 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); border-color: rgba(71,71,71,0.9);
} }
@ -456,12 +466,6 @@ img.delete_icon {
font-size: 12pt; font-size: 12pt;
} }
.prompt_demo_choice_label {
margin: 25px 20px 5px;
font-size: 12pt;
white-space: normal;
}
.prompt_demo_text { .prompt_demo_text {
white-space: pre; white-space: pre;
line-height: 170%; line-height: 170%;

View file

@ -120,6 +120,8 @@ controllers.controller("colorsController", function($scope, $http) {
controllers.controller("promptController", function($scope, $http) { controllers.controller("promptController", function($scope, $http) {
$scope.selectedPrompt = null; $scope.selectedPrompt = null;
$scope.showSaveButton = true;
$scope.savePromptButtonTitle = "Set Prompt";
$scope.fetchSamplePrompts= function() { $scope.fetchSamplePrompts= function() {
$http.get("/sample_prompts/").success(function(data, status, headers, config) { $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.selectPrompt = function(prompt) {
$scope.selectedPrompt= promptt; $scope.selectedPrompt= prompt;
$scope.savePromptButtonTitle = "Set Prompt";
} }
$scope.setNewPrompt = function(selectedPrompt) { $scope.setNewPrompt = function(selectedPrompt) {
@ -143,9 +147,18 @@ controllers.controller("promptController", function($scope, $http) {
$scope.samplePrompts[0].function = selectedPrompt.function; $scope.samplePrompts[0].function = selectedPrompt.function;
$scope.samplePrompts[0].font_size = selectedPrompt.font_size; $scope.samplePrompts[0].font_size = selectedPrompt.font_size;
$scope.selectedPrompt = $scope.samplePrompts[0]; $scope.selectedPrompt = $scope.samplePrompts[0];
// Note that we set it
$scope.savePromptButtonTitle = "Prompt Set!";
})}; })};
$scope.fetchSamplePrompts(); $scope.fetchSamplePrompts();
$scope.setPrompt = function() {
if ($scope.selectedPrompt) {
$scope.setNewPrompt($scope.selectedPrompt);
}
}
}); });
controllers.controller("functionsController", function($scope, $http) { controllers.controller("functionsController", function($scope, $http) {

View file

@ -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_container" data-ng-repeat="colorScheme in colorSchemes" ng-click="changeSelectedColorScheme(colorScheme)">
<div class="color_scheme_choice_label"> <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 --> <!-- 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>
<div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': colorScheme.preferred_background}"> <div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': colorScheme.preferred_background}">
<span data-ng-style="{'color': colorScheme.command}">/bright/vixens</span> <span data-ng-style="{'color': colorScheme.command}">/bright/vixens</span>

View file

@ -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 ng-repeat="prompt in samplePrompts">
<div class="prompt_demo_choice_label">{{ prompt.name }}</div> <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 ng-bind-html-unsafe='prompt.demo' class="prompt_demo" ng-click="selectPrompt(prompt)"></div>
<div class="prompt_function" ng-show="selectedPrompt == prompt"> </div>
<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> </div>