Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT-ADD] preview of the command prompt #2

Merged
merged 4 commits into from
Jun 5, 2020
Merged

[FEAT-ADD] preview of the command prompt #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b735581
[FEAT-ADD] added live preview of the prompt
Schn33W0lf Jun 4, 2020
6b3dfba
[FIX] fixed preview for single quote
Schn33W0lf Jun 4, 2020
ddb1659
[FEAT-ADD] added style support for live preview
Schn33W0lf Jun 4, 2020
d0e8f2d
[FIX] text color was not applied when dimmed
Schn33W0lf Jun 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,9 +182,23 @@ span.sortable-ghost {
background-color: var(--color-dark);
font-family: 'Roboto Mono', 'Noto Sans Mono', monospace;
line-height: 1.5;
min-height: 1.5em;
word-break: break-all;
}

#prompt-preview {
display: inline-block;
margin-top: 0.8em;
padding: 1em;
color: var(--color-light);
background-color: var(--color-dark);
font-family: 'Roboto Mono', 'Noto Sans Mono', monospace;
line-height: 1.5;
min-height: 1.5em;
word-break: break-all;
white-space: pre;
}

#color-picker-wrapper {
display: none;
position: fixed;
Expand Down Expand Up @@ -279,3 +293,16 @@ span.sortable-ghost {
border-bottom: 4px dashed #dbdbdb;
}
}

.preview-blink {
animation: blink 1s infinite;
opacity: 1;
}

@keyframes blink {
0% { color: rgba(0, 0, 0, 0); }
47% { color: rgba(0, 0, 0, 0); }
50% { color: inherit }
97% { color: inherit }
100% { color: rgba(0, 0, 0, 0); }
}
4 changes: 3 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js" integrity="sha256-9D6DlNlpDfh0C8buQ6NXxrOdLo/wqFUwEB1s70obwfE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-time-format/2.1.1/d3-time-format.js" integrity="sha256-MBta4fg2CxvDIpnqIRMWs9VtqQIG91SMvftRuKSU27I=" crossorigin="anonymous"></script>
<script src="js/enums.js" defer></script>
<script src="js/escaped_prompt_element.js" defer></script>
<script src="js/prompt.js" defer></script>
Expand Down Expand Up @@ -83,7 +84,8 @@ <h2>Output</h2>
MIT License: <https://github.com/refactoringui/heroicons/blob/master/LICENSE>
-->
<svg id="copy-output" fill="currentColor" viewbox="0 0 20 20"><title>Copy to clipboard</title><path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path><path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z"></path></svg><br>
<span id="prompt-output">PS1=</span>
<span id="prompt-output">PS1=</span><br>
<span id="prompt-preview"></span>
</div>
</main>
<div id="color-picker-wrapper">
Expand Down
Loading