mirror of
https://github.com/fish-shell/fish-shell
synced 2024-12-27 21:33:09 +00:00
7fa3dd1747
Refresh some stale CSS, improve some rendering, and fix some bugs. Some of the CSS no longer applied. Remove the bright red X in history and use a tamer color. Fix the prev/next paginator buttons from moving for large paginations. Fix the calculation about disabling prev/next.
354 lines
22 KiB
HTML
354 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="fishconfig">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
|
<title>fish shell configuration</title>
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<link rel="stylesheet" type="text/css" href="fishconfig.css" />
|
|
<link rel="stylesheet" type="text/css" media="print" href="fishconfig_print.css">
|
|
<script type="text/javascript" src="js/colorutils.js" defer></script>
|
|
<script type="text/javascript" src="js/main.js" defer></script>
|
|
<script type="text/javascript" src="js/alpine.js" defer></script>
|
|
</head>
|
|
|
|
<!-- TODO check that every x-for has a :key binding -->
|
|
<!-- TODO check that every template has single child -->
|
|
<!-- TODO try to reduce depth by either splitting routes or eliminating redundant wrappers -->
|
|
|
|
<body id="ancestor" x-data="{ currentTab: 'colors' }">
|
|
<main id="parent">
|
|
<div id="tab_parent">
|
|
<a :class="{'tab': true, 'selected_tab': currentTab =='colors'}" id="tab_colors"
|
|
@click="currentTab = 'colors'">colors</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'prompt'}" id="tab_prompt"
|
|
@click="currentTab = 'prompt'">prompt</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'functions'}" id="tab_functions"
|
|
@click="currentTab = 'functions'">functions</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'variables'}" id="tab_variables"
|
|
@click="currentTab = 'variables'">variables</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'history'}" id="tab_history"
|
|
@click="currentTab = 'history'">history</a>
|
|
<a :class="{'tab': true, 'selected_tab': currentTab == 'bindings'}" id="tab_bindings"
|
|
@click="currentTab = 'bindings'"><span class="print_only">fish shell </span>bindings</a>
|
|
</div>
|
|
<div id="tab_contents">
|
|
<template x-if="currentTab === 'colors'" x-data="colors">
|
|
<div>
|
|
<!-- ko with: color_picker -->
|
|
<div class="colorpicker_text_sample" :style="{'background-color': terminalBackgroundColor}">
|
|
<span style="position: absolute; left: 10px; top: 3px"
|
|
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
|
|
x-text="selectedColorScheme.name"></span>
|
|
<br />
|
|
<div class="color_picker_background_cells">
|
|
<span style="display: block; text-align: right; line-height: 110%"
|
|
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}">
|
|
Background Color:<br />(demo only)
|
|
</span>
|
|
<template x-for="color in sampleTerminalBackgroundColors">
|
|
<label :style="{'background-color': color}">
|
|
<input type="radio" :value="color" x-model="terminalBackgroundColor" hidden
|
|
:title="'Preview with this background color.\n\nfish cannot change the background color of your terminal. Refer to your terminal settings to set its background color.'">
|
|
</input>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
<!-- This is the sample text -->
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
|
@click="selectColorSetting('command')">/bright/vixens</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'param'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.param)}"
|
|
@click="selectColorSetting('param')">jump</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.end)}"
|
|
@click="selectColorSetting('end')">|</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
|
@click="selectColorSetting('command')">dozy</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.quote)}"
|
|
@click="selectColorSetting('quote')"> "fowl"</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'redirection'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.redirection)}"
|
|
@click="selectColorSetting('redirection')">> quack</span>
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.end)}"
|
|
@click="selectColorSetting('end')">&</span>
|
|
<br>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
|
@click="selectColorSetting('command')">echo</span>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'error'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.error)}"
|
|
@click="selectColorSetting('error')">'</span><span
|
|
:class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.quote)}"
|
|
@click="selectColorSetting('quote')">Errors are the portals to discovery</span>
|
|
|
|
<br>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'comment'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.comment)}"
|
|
@click="selectColorSetting('comment')"># This is a comment</span>
|
|
|
|
<br>
|
|
|
|
<span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
|
@click="selectColorSetting('command')">Th</span><span class="fake_cursor"><span
|
|
style="visibility: hidden">i</span></span><span
|
|
:class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'autosuggestion'}"
|
|
:style="{ 'color': interpret_color(selectedColorScheme.autosuggestion)}"
|
|
@click="selectColorSetting('autosuggestion')">s is an autosuggestion</span>
|
|
|
|
|
|
<div style="position: absolute; right: 5px; bottom: 5px;">
|
|
|
|
<button class="customize_theme_button" :class="{button_highlight: customizationActive}"
|
|
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
|
|
@click="toggleCustomizationActive">Customize</button>
|
|
|
|
<button class="save_button"
|
|
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
|
|
x-show="showSaveButton" @click="setTheme" x-text="saveThemeButtonTitle"></button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div x-show="customizationActive">
|
|
<div style="margin: 10px 0 7px 35px;">Choose a color for <span
|
|
x-text="csUserVisibleTitle"></span>:</div>
|
|
<!-- TODO maybe add input[type=color] for 24bit terminals -->
|
|
<table class="colorpicker_term256" style="margin: 0px 20px;">
|
|
<tbody>
|
|
<template x-for="color_array in colorArraysArray">
|
|
<tr class="colorpicker_term256_row">
|
|
<template x-for="color in color_array">
|
|
<td class="colorpicker_term256_cell"
|
|
:style="{'background-color': interpret_color(color)}"
|
|
@click="changeSelectedTextColor(color)">
|
|
<div class="colorpicker_term256_selection_indicator"
|
|
x-show="selectedColorScheme[selectedColorSetting] == color"
|
|
:style="{'border-color': interpret_color(border_color_for_color(color))}">
|
|
</div>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
<!-- /ko -->
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin: 10px 0 7px 35px;">Preview a theme below:</div>
|
|
|
|
<div class="color_scheme_choices_scrollview">
|
|
<div class="color_scheme_choices_list">
|
|
<template x-for="colorScheme in colorSchemes">
|
|
<div class="color_scheme_choice_container"
|
|
@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 x-text="colorScheme.name"></span>
|
|
<a x-show="colorScheme.url" style="text-decoration: none; color: inherit;"
|
|
:href="colorScheme.url">➚</a>
|
|
</div>
|
|
<div class="colorpicker_text_sample_tight"
|
|
:style="{'background-color': colorScheme.preferred_background}">
|
|
<span
|
|
:style="{'color': interpret_color(colorScheme.command)}">/bright/vixens</span>
|
|
<span :style="{'color': interpret_color(colorScheme.param)}">jump</span>
|
|
<span :style="{'color': interpret_color(colorScheme.end)}">|</span>
|
|
<span :style="{'color': interpret_color(colorScheme.command)}">dozy</span>
|
|
<span :style="{'color': interpret_color(colorScheme.quote)}"> "fowl" </span>
|
|
<span :style="{'color': interpret_color(colorScheme.redirection)}">>
|
|
quack</span>
|
|
<span :style="{'color': interpret_color(colorScheme.end)}">&</span>
|
|
<br>
|
|
<span :style="{'color': interpret_color(colorScheme.command)}">echo</span>
|
|
<span :style="{'color': interpret_color(colorScheme.error)}">'</span><span
|
|
:style="{'color': interpret_color(colorScheme.quote)}">Errors are the
|
|
portals to discovery</span>
|
|
<br>
|
|
<span :style="{'color': interpret_color(colorScheme.comment)}"># This is a
|
|
comment</span>
|
|
<br>
|
|
<span :style="{'color': interpret_color(colorScheme.command)}">Th</span><span
|
|
class="fake_cursor"><span style="visibility: hidden">i</span></span><span
|
|
:style="{ 'color': interpret_color(colorScheme.autosuggestion)}">s is an
|
|
autosuggestion</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Investigate potential race condition with selectedPrompt (e.g. replace x-if with x-show) -->
|
|
<template x-if="currentTab === 'prompt'" x-data="prompt">
|
|
<div class="height_limiter">
|
|
<!-- 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;"
|
|
:style="{'background-color': terminalBackgroundColor}">
|
|
<div class="prompt_demo_choice_label" style="color: #FFF;" x-text="selectedPrompt.name"></div>
|
|
<div style='display: flex'>
|
|
<div x-html='selectedPrompt.demo' style='flex-grow: 1' class="prompt_demo unbordered"></div>
|
|
<template x-if="selectedPrompt.right">
|
|
<div title="right prompt for {{selectedPrompt.name }}" x-html='selectedPrompt.right'
|
|
class="prompt_demo unbordered" @click="selectPrompt(selectedPrompt)">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div style="position: absolute; right: 5px; bottom: 5px;">
|
|
<button class="save_button" x-show="showSaveButton" style="color: #CCC" @click="setPrompt()"
|
|
x-text="savePromptButtonTitle"></button>
|
|
</div>
|
|
</div>
|
|
<div style="margin: 10px 15px 7px 15px; padding-bottom: 10px; border-bottom: solid 1px #999">Preview
|
|
a
|
|
prompt below:</div>
|
|
<div class="prompt_choices_scrollview">
|
|
<div class="prompt_choices_list">
|
|
<template x-for="p in samplePrompts" :key="p.name">
|
|
<div>
|
|
<div class="prompt_demo_choice_label" x-text="p.name"></div>
|
|
<template x-if="p.right">
|
|
<div style="display: flex;">
|
|
<div x-html="p.demo" class="prompt_demo" style="flex-grow: 1"
|
|
@click="selectPrompt(p)"></div>
|
|
<div title="right prompt for {{p.name}}" x-html="p.right || ''"
|
|
class="prompt_demo" @click="selectPrompt(p)"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="!p.right">
|
|
<div x-html="p.demo" class="prompt_demo" @click="selectPrompt(p)">
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'functions'" x-data="functions">
|
|
<div class="master_detail_table">
|
|
<div class="master">
|
|
<template x-for="func in functions">
|
|
<!-- TODO use ul/li -->
|
|
<div>
|
|
<div id="master_{{func}}"
|
|
:class="{'master_element': true, 'selected_master_elem': func == selectedFunction }"
|
|
@click="selectFunction(func)">
|
|
<span class="master_element_text" x-text="func"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="detail">
|
|
<div class="detail_function" x-html="functionDefinition"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'variables'" x-data="variables">
|
|
<div>
|
|
<div id="table_filter_container">
|
|
<input id="table_filter_text_box" class="filter_text_box text_box_transient"
|
|
placeholder="Filter" x-model="query">
|
|
</div>
|
|
<table class="data_table">
|
|
<template x-for="v in filteredVars" :key="v.name">
|
|
<tr class="data_table_row" tabindex="0" x-data="{ focused: false }"
|
|
@focusin="focused = true" @focusout="focused = false">
|
|
<td class="data_table_cell no_overflow" style="text-align: right; padding-right: 30px;"
|
|
x-text="v.name"></td>
|
|
<!-- Small hack to select/unselect variables -->
|
|
<td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
|
|
style="text-align: left; padding-right: 30px;" x-text="v.value"></td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'history'" x-data="history">
|
|
<div>
|
|
<div id="table_filter_container">
|
|
<table class="paginator">
|
|
<tr>
|
|
<td class="prev">
|
|
<button type="button" @click="prevPage" :disabled="currentPage == 0">« Prev</button>
|
|
</td>
|
|
<td class="desc" x-text="currentPageDescription"></td>
|
|
<td class="next">
|
|
<button type="button" @click="nextPage"
|
|
:disabled="(currentPage+1)*itemsPerPage >= filteredItems.length">Next »</button>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
<input id="table_filter_text_box" class="filter_text_box text_box_transient"
|
|
placeholder="Filter" x-model.debounce="query">
|
|
</div>
|
|
<table class="data_table">
|
|
<!-- TODO maybe use history index as keys here? -->
|
|
<template
|
|
x-for="item in filteredItems.slice(currentPage * itemsPerPage, (currentPage+1) * itemsPerPage)"
|
|
:key="item">
|
|
<tr>
|
|
<td :class="{'history_text': true, 'no_overflow': selectedItems.indexOf(item) < 0}"
|
|
@click="selectItem(item)" x-text="item"></td>
|
|
<td class="history_delete">
|
|
<button type="button" class="delete_button" title="Delete"
|
|
@click="deleteHistoryItem(item)">×</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template x-if="currentTab === 'bindings'" x-data="bindings"
|
|
x-init="bindings = await (await fetch('bindings/')).json()">
|
|
<div>
|
|
<div id="table_filter_container">
|
|
<input id="table_filter_text_box" class="filter_text_box text_box_transient"
|
|
placeholder="Filter" x-model="query">
|
|
</div>
|
|
<table class="data_table">
|
|
<template x-for="b in filteredBindings" :key="b.command">
|
|
<tr class="data_table_row" tabindex="0" x-data="{ focused: false }"
|
|
@focusin="focused = true" @focusout="focused = false">
|
|
<td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
|
|
style="text-align: right; padding-right: 30px;" x-text="b.command"></td>
|
|
<!-- Small hack to select/unselect variables -->
|
|
<td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
|
|
style="text-align: left; padding-right: 30px;">
|
|
<template x-for="variety in b.bindings" :key="variety.readable_binding">
|
|
<div>
|
|
<span x-text="variety.readable_binding"></span>
|
|
<template x-for="raw in variety.raw_bindings" :key="raw">
|
|
<div class="raw_binding" x-show="focused" x-text="raw"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|