czoczo
/
BetterBash
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

colors light and bold checkboxes

Browse Source
main
czoczo 7 months ago
parent 4780423359
commit dfe71b4211
1 changed files with 346 additions and 266 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 612
      webpage/BetterBash/src/App.vue

612
webpage/BetterBash/src/App.vue
Unescape View File

@ -5,39 +5,51 @@
<div class="customizer">
<div class="color-controls">
<div
v-for="(colorCode, colorName) in colors"
:key="colorName"
class="color-select"
v-for="(label, colorKey) in colorLabels"
:key="colorKey"
class="color-select-group"
>
<label>
{{ colorLabels[colorName] || colorName }}
<div
class="color-preview"
:style="{ backgroundColor: getPreviewColor(colorCode) }"
></div>
</label>
<select v-model="colors[colorName]" @change="updatePrompt">
<option
v-for="(color, name) in terminalColors"
:key="name"
:value="color.code"
>
{{ name }} </option>
</select>
<div class="color-selector-main">
<label :for="`select-${colorKey}`">
{{ label }}
<div
class="color-preview"
:style="{ backgroundColor: getPreviewColorFromBash(generatedColors[colorKey]) }"
></div>
</label>
<select :id="`select-${colorKey}`" v-model="selectedColorAttributes[colorKey].baseCode" @change="updatePromptDetails">
<option
v-for="colorOpt in baseColorOptions"
:key="colorOpt.value"
:value="colorOpt.value"
>
{{ colorOpt.name }}
</option>
</select>
</div>
<div class="color-modifier-checkboxes">
<label :for="`light-${colorKey}`">
<input :id="`light-${colorKey}`" type="checkbox" v-model="selectedColorAttributes[colorKey].isLight" @change="updatePromptDetails" />
Light
</label>
<label :for="`bold-${colorKey}`">
<input :id="`bold-${colorKey}`" type="checkbox" v-model="selectedColorAttributes[colorKey].isBold" @change="updatePromptDetails" />
Bold
</label>
</div>
</div>
</div>
<div class="terminal">
<div class="ps1-line">
<span :class="getColorClass(colors.BORDCOL)">┌─</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.SECONDARY_COLOR)"
>user</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">@</span
><span :class="getColorClass(colors.PRIMARY_COLOR)">myhost:pts/5</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span
<span :class="getColorClassFromBash(generatedColors.BORDCOL)">┌─</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.SECONDARY_COLOR)">user</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">@</span
><span :class="getColorClassFromBash(generatedColors.PRIMARY_COLOR)">myhost:pts/5</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">──</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span class="text-yellow">▶</span
><span class="text-bright-black">▬</span
><span class="text-bright-white">▲</span
@ -45,56 +57,48 @@
><span class="text-bright-white">▲</span
><span class="text-bright-black">▬</span
><span class="text-yellow">◀</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.SECONDARY_COLOR)"
>1 ↻</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)"
>─────────────────────────────</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.TIME_COLOR)"
>Wed May 14</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">───</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)"
>00:40:00</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">────</span>
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">──</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.SECONDARY_COLOR)">1 ↻</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">─────────────────────────────</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.TIME_COLOR)">Wed May 14</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">───</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.PRIMARY_COLOR)">00:40:00</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">────</span>
</div>
<div class="ps1-line">
<span :class="getColorClass(colors.BORDCOL)">└─</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.PATH_COLOR)"
>~/repo</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">─</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)"
>$</span
><span :class="getColorClass(colors.RST)"> on </span><span
:class="getColorClass(colors.PRIMARY_COLOR)"
>master</span
><span :class="getColorClass(colors.RST)">=</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">-&gt;</span>
<span :class="getColorClassFromBash(generatedColors.BORDCOL)">└─</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.PATH_COLOR)">~/repo</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">─</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.PRIMARY_COLOR)">$</span
><span :class="getColorClassFromBash(generatedColors.RST)"> on </span
><span :class="getColorClassFromBash(generatedColors.PRIMARY_COLOR)">master</span
><span :class="getColorClassFromBash(generatedColors.RST)">=</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">-&gt;</span>
</div>
<div class="ps1-line">&nbsp;</div>
<div class="ps1-line">&nbsp;</div>
<div class="ps1-line">
<span :class="getColorClass(colors.BORDCOL)">┌─</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.ROOT_COLOR)"
>ROOT</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">@</span
><span :class="getColorClass(colors.PRIMARY_COLOR)">myhost:pts/5</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span
<span :class="getColorClassFromBash(generatedColors.BORDCOL)">┌─</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.ROOT_COLOR)">ROOT</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">@</span
><span :class="getColorClassFromBash(generatedColors.PRIMARY_COLOR)">myhost:pts/5</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">──</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span class="text-yellow">▶</span
><span class="text-bright-black">▬</span
><span class="text-bright-white">▲</span
@ -102,106 +106,137 @@
><span class="text-bright-white">▲</span
><span class="text-bright-black">▬</span
><span class="text-yellow">◀</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)"
>───────────────────────────</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.ERR_COLOR)"
>128 ↵</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.TIME_COLOR)"
>Wed May 14</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">───</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.ERR_COLOR)"
>00:40:00</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">────</span>
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">───────────────────────────</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.ERR_COLOR)">128 ↵</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">──</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.TIME_COLOR)">Wed May 14</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">───</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.ERR_COLOR)">00:40:00</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">────</span>
</div>
<div class="ps1-line">
<span :class="getColorClass(colors.BORDCOL)">└─</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.PATH_COLOR)"
>~</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">─</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)"
>$</span
><span :class="getColorClass(colors.SEPARATOR_COLOR)">)</span
><span :class="getColorClass(colors.BORDCOL)">-&gt;</span>
<span :class="getColorClassFromBash(generatedColors.BORDCOL)">└─</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.PATH_COLOR)">~</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">─</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">(</span
><span :class="getColorClassFromBash(generatedColors.PRIMARY_COLOR)">$</span
><span :class="getColorClassFromBash(generatedColors.SEPARATOR_COLOR)">)</span
><span :class="getColorClassFromBash(generatedColors.BORDCOL)">-&gt;</span>
</div>
</div>
<div class="info-section">
<h3>About This Customizer</h3>
<p>
This tool allows you to customize the colors of your bash PS1 prompt.
Select different terminal colors for each component to see how they
Select different terminal colors for each component and individually toggle
"light" (bright) or "bold" styles to see how they
look in the preview.
</p>
<p>
To use your customized prompt, you'll need to replace the color
variables in your .bashrc file with the selected values.
</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// Terminal colors mapping
const terminalColors = {
Black: { code: '\\[\\033[00;30m\\]', hex: '#000000', cssClass: 'text-black' },
Red: { code: '\\[\\033[00;31m\\]', hex: '#cc0000', cssClass: 'text-red' },
Green: { code: '\\[\\033[00;32m\\]', hex: '#4e9a06', cssClass: 'text-green' },
Yellow: { code: '\\[\\033[00;33m\\]', hex: '#c4a000', cssClass: 'text-yellow' },
Blue: { code: '\\[\\033[00;34m\\]', hex: '#3465a4', cssClass: 'text-blue' },
Magenta: { code: '\\[\\033[00;35m\\]', hex: '#75507b', cssClass: 'text-magenta' },
Cyan: { code: '\\[\\033[00;36m\\]', hex: '#06989a', cssClass: 'text-cyan' },
White: { code: '\\[\\033[00;37m\\]', hex: '#d3d7cf', cssClass: 'text-white' },
'Bright Black': { code: '\\[\\033[00;90m\\]', hex: '#555753', cssClass: 'text-bright-black' },
'Bright Red': { code: '\\[\\033[00;91m\\]', hex: '#ef2929', cssClass: 'text-bright-red' },
'Bright Green': { code: '\\[\\033[00;92m\\]', hex: '#8ae234', cssClass: 'text-bright-green' },
'Bright Yellow': { code: '\\[\\033[00;93m\\]', hex: '#fce94f', cssClass: 'text-bright-yellow' },
'Bright Blue': { code: '\\[\\033[00;94m\\]', hex: '#729fcf', cssClass: 'text-bright-blue' },
'Bright Magenta': { code: '\\[\\033[00;95m\\]', hex: '#ad7fa8', cssClass: 'text-bright-magenta' },
'Bright Cyan': { code: '\\[\\033[00;96m\\]', hex: '#34e2e2', cssClass: 'text-bright-cyan' },
'Bright White': { code: '\\[\\033[00;97m\\]', hex: '#eeeeec', cssClass: 'text-bright-white' },
'Bold Red': { code: '\\[\\033[00;31;1m\\]', hex: '#ff4d4d', cssClass: 'text-bold-red' },
'Bold Green': { code: '\\[\\033[00;32;1m\\]', hex: '#73d216', cssClass: 'text-bold-green' },
'Bold Yellow': { code: '\\[\\033[00;33;1m\\]', hex: '#edd400', cssClass: 'text-bold-yellow' },
'Bold Blue': { code: '\\[\\033[00;34;1m\\]', hex: '#3584e4', cssClass: 'text-bold-blue' },
'Bold Magenta': { code: '\\[\\033[00;35;1m\\]', hex: '#ad7fa8', cssClass: 'text-bold-magenta' },
'Bold Cyan': { code: '\\[\\033[00;36;1m\\]', hex: '#34e2e2', cssClass: 'text-bold-cyan' },
'Bold White': { code: '\\[\\033[00;37;1m\\]', hex: '#ffffff', cssClass: 'text-bold-white' },
'Bold Bright Magenta': { code: '\\[\\033[00;95;1m\\]', hex: '#d070d0', cssClass: 'text-bold-bright-magenta' },
'Bold Bright Black': { code: '\\[\\033[00;90;1m\\]', hex: '#7c7c7c', cssClass: 'text-bold-bright-black' },
'Bold Bright White': { code: '\\[\\033[00;97;1m\\]', hex: '#ffffff', cssClass: 'text-bold-bright-white' },
};
import { ref, computed } from 'vue';
// Color labels for better readability
// Color labels for UI
const colorLabels = {
PRIMARY_COLOR: 'Primary Color',
SECONDARY_COLOR: 'Secondary Color',
ROOT_COLOR: 'Root Color',
ROOT_COLOR: 'Root User Color',
TIME_COLOR: 'Time Color',
ERR_COLOR: 'Error Color',
SEPARATOR_COLOR: 'Separator Bold',
ERR_COLOR: 'Error Code Color',
SEPARATOR_COLOR: 'Separator Color',
BORDCOL: 'Border Color',
PATH_COLOR: 'Path Color',
};
// Default colors
const colors = ref({
// --- Base Color Definitions (30-37 range) ---
const baseColorDefinitions = {
30: { name: "Black", hex: "#000000", css: "text-black" },
31: { name: "Red", hex: "#cc0000", css: "text-red" },
32: { name: "Green", hex: "#4e9a06", css: "text-green" },
33: { name: "Yellow", hex: "#c4a000", css: "text-yellow" },
34: { name: "Blue", hex: "#3465a4", css: "text-blue" },
35: { name: "Magenta", hex: "#75507b", css: "text-magenta" },
36: { name: "Cyan", hex: "#06989a", css: "text-cyan" },
37: { name: "Light Gray", hex: "#d3d7cf", css: "text-white" },
};
// --- Light/Bright Color Definitions (90-97 range) ---
const lightColorDefinitions = {
90: { name: "Bright Black", hex: "#555753", css: "text-bright-black" },
91: { name: "Bright Red", hex: "#ef2929", css: "text-bright-red" },
92: { name: "Bright Green", hex: "#8ae234", css: "text-bright-green" },
93: { name: "Bright Yellow", hex: "#fce94f", css: "text-bright-yellow" },
94: { name: "Bright Blue", hex: "#729fcf", css: "text-bright-blue" },
95: { name: "Bright Magenta", hex: "#ad7fa8", css: "text-bright-magenta" },
96: { name: "Bright Cyan", hex: "#34e2e2", css: "text-bright-cyan" },
97: { name: "White", hex: "#eeeeec", css: "text-bright-white" },
};
// --- Specific Hex/CSS for BOLD versions ---
const boldColorSpecifics = {
31: { hex: "#ff4d4d", css: "text-bold-red" },
32: { hex: "#73d216", css: "text-bold-green" },
33: { hex: "#edd400", css: "text-bold-yellow" },
34: { hex: "#3584e4", css: "text-bold-blue" },
35: { hex: "#ad7fa8", css: "text-bold-magenta" },
36: { hex: "#34e2e2", css: "text-bold-cyan" },
37: { hex: "#ffffff", css: "text-bold-white" },
90: { hex: "#7c7c7c", css: "text-bold-bright-black" },
95: { hex: "#d070d0", css: "text-bold-bright-magenta" },
97: { hex: "#ffffff", css: "text-bold-bright-white" },
};
// --- Create a comprehensive map for lookup: codeNum-isBold -> {hex, cssClass} ---
const finalColorMappings = {};
// Normal (non-bold, non-light)
for (const code in baseColorDefinitions) {
finalColorMappings[`${code}-false`] = { hex: baseColorDefinitions[code].hex, cssClass: baseColorDefinitions[code].css };
}
// Light (non-bold, light)
for (const code in lightColorDefinitions) {
finalColorMappings[`${code}-false`] = { hex: lightColorDefinitions[code].hex, cssClass: lightColorDefinitions[code].css };
}
// Bold Normal
for (const code in baseColorDefinitions) {
const numCode = parseInt(code);
if (boldColorSpecifics[numCode] && !(numCode >= 90)) {
finalColorMappings[`${numCode}-true`] = { hex: boldColorSpecifics[numCode].hex, cssClass: boldColorSpecifics[numCode].css };
} else {
finalColorMappings[`${numCode}-true`] = { hex: baseColorDefinitions[numCode].hex, cssClass: `${baseColorDefinitions[numCode].css} font-bold-style` };
}
}
// Bold Light
for (const code in lightColorDefinitions) {
const numCode = parseInt(code);
if (boldColorSpecifics[numCode]) {
finalColorMappings[`${numCode}-true`] = { hex: boldColorSpecifics[numCode].hex, cssClass: boldColorSpecifics[numCode].css };
} else {
finalColorMappings[`${numCode}-true`] = { hex: lightColorDefinitions[numCode].hex, cssClass: `${lightColorDefinitions[numCode].css} font-bold-style` };
}
}
// --- Options for Select Dropdowns ---
const baseColorOptions = Object.entries(baseColorDefinitions).map(([value, { name }]) => ({
name,
value: parseInt(value),
}));
// --- Initial state of selected color attributes for each prompt part ---
const initialBashColorCodes = {
PRIMARY_COLOR: '\\[\\033[00;92m\\]',
SECONDARY_COLOR: '\\[\\033[00;95;1m\\]',
ROOT_COLOR: '\\[\\033[00;31;1m\\]',
@ -210,37 +245,123 @@ const colors = ref({
SEPARATOR_COLOR: '\\[\\033[00;97;1m\\]',
BORDCOL: '\\[\\033[00;90;1m\\]',
PATH_COLOR: '\\[\\033[00;97;1m\\]',
});
RST: '\\[\\033[00;37m\\]',
};
function parseInitialBashCodeToAttributes(bashCode) {
// Regex to capture style (like '00'), color code, and optional bold marker ';1m'
// Example: \[\\033[00;92m\] -> style: 00, colorNum: 92, boldSuffix: undefined
// Example: \[\\033[00;31;1m\] -> style: 00, colorNum: 31, boldSuffix: ;1m
// Example: \[\\033[1;31m\] -> style: 1, colorNum: 31, boldSuffix: undefined (if we adapt to this)
const match = bashCode.match(/\[(?:(\d{1,2});)?(\d{2})(;1)?m/);
let baseCode = 37; // Default: Light Gray
let isLight = false;
let isBold = false;
if (match) {
const stylePart = match[1]; // Might be undefined if only color code is present e.g. \[\033[32m\]
let colorNum = parseInt(match[2]);
const boldSuffix = match[3]; // ';1m'
isLight = colorNum >= 90 && colorNum <= 97;
baseCode = isLight ? colorNum - 60 : colorNum;
// Determine boldness:
// 1. If there's a ';1m' suffix (specific to some original formats)
// 2. If the style part itself is '1' or '01' (standard bold)
isBold = !!boldSuffix || stylePart === '1' || stylePart === '01';
// Get the hex color for preview
const getPreviewColor = (colorCode) => {
for (const color of Object.values(terminalColors)) {
if (color.code === colorCode) {
return color.hex;
} else {
// Fallback for very simple codes like \[\033[32m\]
const simpleMatch = bashCode.match(/\[(\d{2})m/);
if (simpleMatch) {
let colorNum = parseInt(simpleMatch[1]);
isLight = colorNum >= 90 && colorNum <= 97;
baseCode = isLight ? colorNum - 60 : colorNum;
isBold = false; // No bold info in this simple format
}
}
return '#ffffff';
};
return { baseCode, isLight, isBold };
}
const selectedColorAttributes = ref({});
for (const key in colorLabels) {
if (initialBashColorCodes[key]) {
selectedColorAttributes.value[key] = parseInitialBashCodeToAttributes(initialBashColorCodes[key]);
} else {
// Default for any new keys not in initialBashColorCodes
selectedColorAttributes.value[key] = { baseCode: 37, isLight: false, isBold: false };
}
}
// --- Computed property to generate final Bash escape codes ---
const generatedColors = computed(() => {
const finalCodes = {};
for (const key in selectedColorAttributes.value) {
const attrs = selectedColorAttributes.value[key];
let actualCode = attrs.isLight ? attrs.baseCode + 60 : attrs.baseCode;
// Get CSS class for a color code
const getColorClass = (colorCode) => {
for (const color of Object.values(terminalColors)) {
if (color.code === colorCode) {
return color.cssClass;
if (attrs.isBold) {
finalCodes[key] = `\\[\\033[1;${actualCode}m\\]`;
} else {
finalCodes[key] = `\\[\\033[${actualCode}m\\]`;
}
}
return 'text-reset';
return finalCodes;
});
// --- Helper function to parse generated Bash codes for preview ---
function parseGeneratedBashCode(bashCode) {
const match = bashCode.match(/\[(?:(1);)?(\d{2})m/);
if (match) {
const isBold = !!match[1];
const colorNum = parseInt(match[2]);
return { colorNum, isBold };
}
const simplerMatch = bashCode.match(/\[(?:0;)?(\d{2})m/);
if (simplerMatch) {
return { colorNum: parseInt(simplerMatch[1]), isBold: false };
}
// Fallback if parsing fails, try to determine from current individual attribute
// This part is tricky as this function only gets the bash code, not the key.
// For robustness, stick to parsing the code or a safe default.
console.warn("Could not parse bash code for preview:", bashCode);
return { colorNum: 37, isBold: false }; // Default to non-bold light gray
}
// --- Get Hex Color for Preview Box ---
const getPreviewColorFromBash = (bashCode) => {
if (!bashCode) return baseColorDefinitions[37].hex; // Default for undefined
const { colorNum, isBold } = parseGeneratedBashCode(bashCode);
const mappingKey = `${colorNum}-${isBold}`;
const fallbackKeyNormal = `${colorNum}-false`;
const colorData = finalColorMappings[mappingKey] || finalColorMappings[fallbackKeyNormal];
if (colorData) return colorData.hex;
return baseColorDefinitions[37].hex; // Ultimate fallback
};
// Update the prompt preview when colors change
const updatePrompt = () => {
console.log('Updating prompt colors');
// --- Get CSS Class for Prompt Preview ---
const getColorClassFromBash = (bashCode) => {
if (!bashCode) return 'text-white';
const { colorNum, isBold } = parseGeneratedBashCode(bashCode);
const mappingKey = `${colorNum}-${isBold}`;
const fallbackKeyNormal = `${colorNum}-false`;
const colorData = finalColorMappings[mappingKey];
if (colorData) return colorData.cssClass;
const normalData = finalColorMappings[fallbackKeyNormal];
if (normalData) {
return isBold ? `${normalData.cssClass} font-bold-style` : normalData.cssClass;
}
return 'text-white font-bold-style'; // Ultimate fallback
};
const updatePromptDetails = () => {
// console.log("Prompt attributes updated:", JSON.parse(JSON.stringify(selectedColorAttributes.value)));
};
onMounted(() => {
// Initial update - no direct DOM manipulation in setup, but the template binding works
console.log('Component mounted');
});
</script>
<style scoped>
@ -269,22 +390,26 @@ h1 {
}
.color-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax for more space */
gap: 20px;
}
.color-select {
.color-select-group {
display: flex;
flex-direction: column;
background-color: #2d2d2d;
padding: 15px;
border-radius: 8px;
font-family: Consolas, Monaco, 'Lucida Console', monospace;
gap: 10px; /* Space between main selector and checkboxes */
}
label {
.color-selector-main label {
margin-bottom: 8px;
font-weight: bold;
display: flex;
align-items: center;
}
select {
.color-selector-main select {
width: 100%;
padding: 8px;
background-color: #3a3a3a;
color: #fff;
@ -292,6 +417,20 @@ select {
border-radius: 4px;
font-family: Consolas, Monaco, 'Lucida Console', monospace;
}
.color-modifier-checkboxes {
display: flex;
gap: 15px; /* Space between Light and Bold checkboxes */
margin-top: 5px;
}
.color-modifier-checkboxes label {
display: flex;
align-items: center;
gap: 5px;
font-weight: normal; /* Normal weight for checkbox labels */
}
.color-modifier-checkboxes input[type="checkbox"] {
margin-right: 4px;
}
.terminal {
background-color: #000;
padding: 20px;
@ -301,14 +440,11 @@ select {
overflow-x: auto;
margin-top: 20px;
white-space: pre-wrap;
line-height: 0.7; /* Ensure tight line height for the border */
line-height: 0.9;
font-size: 18px;
}
.ps1-line {
margin-bottom: 5px;
}
.ps1-input {
margin-top: 5px;
margin-bottom: 0px;
}
.color-preview {
display: inline-block;
@ -325,97 +461,41 @@ select {
border-radius: 8px;
}
/* Terminal text colors */
.text-black {
color: #000000;
}
.text-red {
color: #cc0000;
}
.text-green {
color: #4e9a06;
}
.text-yellow {
color: #c4a000;
}
.text-blue {
color: #3465a4;
}
.text-magenta {
color: #75507b;
}
.text-cyan {
color: #06989a;
}
.text-white {
color: #d3d7cf;
}
.text-bright-black {
color: #555753;
}
.text-bright-red {
color: #ef2929;
}
.text-bright-green {
color: #8ae234;
}
.text-bright-yellow {
color: #fce94f;
}
.text-bright-blue {
color: #729fcf;
}
.text-bright-magenta {
color: #ad7fa8;
}
.text-bright-cyan {
color: #34e2e2;
}
.text-bright-white {
color: #eeeeec;
}
.text-bold-red {
color: #ff4d4d;
font-weight: bold;
}
.text-bold-green {
color: #73d216;
font-weight: bold;
}
.text-bold-yellow {
color: #edd400;
font-weight: bold;
}
.text-bold-blue {
color: #3584e4;
font-weight: bold;
}
.text-bold-magenta {
color: #ad7fa8;
font-weight: bold;
}
.text-bold-cyan {
color: #34e2e2;
font-weight: bold;
}
.text-bold-white {
color: #ffffff;
font-weight: bold;
}
.text-bold-bright-magenta {
color: #d070d0;
font-weight: bold;
}
.text-bold-bright-black {
color: #7c7c7c;
font-weight: bold;
}
.text-bold-bright-white {
color: #ffffff;
font-weight: bold;
}
.text-red-on-white {
color: #ffffff;
background-color: #c00;
.font-bold-style {
font-weight: bold !important;
}
/* Terminal text colors from original CSS */
.text-black { color: #000000; }
.text-red { color: #cc0000; }
.text-green { color: #4e9a06; }
.text-yellow { color: #c4a000; }
.text-blue { color: #3465a4; }
.text-magenta { color: #75507b; }
.text-cyan { color: #06989a; }
.text-white { color: #d3d7cf; }
.text-bright-black { color: #555753; }
.text-bright-red { color: #ef2929; }
.text-bright-green { color: #8ae234; }
.text-bright-yellow { color: #fce94f; }
.text-bright-blue { color: #729fcf; }
.text-bright-magenta { color: #ad7fa8; }
.text-bright-cyan { color: #34e2e2; }
.text-bright-white { color: #eeeeec; }
.text-bold-red { color: #ff4d4d; font-weight: bold; }
.text-bold-green { color: #73d216; font-weight: bold; }
.text-bold-yellow { color: #edd400; font-weight: bold; }
.text-bold-blue { color: #3584e4; font-weight: bold; }
.text-bold-magenta { color: #ad7fa8; font-weight: bold; }
.text-bold-cyan { color: #34e2e2; font-weight: bold; }
.text-bold-white { color: #ffffff; font-weight: bold; }
.text-bold-bright-magenta { color: #d070d0; font-weight: bold; }
.text-bold-bright-black { color: #7c7c7c; font-weight: bold; }
.text-bold-bright-white { color: #ffffff; font-weight: bold; }
.text-red-on-white { color: #ffffff; background-color: #c00; }
.text-reset { color: #d3d7cf; }
</style>

Write Preview
Loading…
Cancel
Save