4 Commits

Author SHA1 Message Date
51fcccafa2 fix os type calculation and bump version 2023-09-11 16:18:05 -07:00
e3913ab4c9 add todo list 2023-09-11 16:11:06 -07:00
c16f21bba3 Merge branch 'terminal' 2023-09-11 16:10:58 -07:00
fa228acc3a use svg animation for spinner 2023-08-06 21:25:24 -07:00
8 changed files with 57 additions and 114 deletions

View File

@ -1,6 +1,6 @@
{
"name": "creddy",
"version": "0.2.3",
"version": "0.3.0",
"scripts": {
"dev": "vite",
"build": "vite build",

View File

@ -1,6 +1,6 @@
[package]
name = "creddy"
version = "0.2.3"
version = "0.3.0"
description = "A friendly AWS credentials manager"
authors = ["Joseph Montanaro"]
license = ""

View File

@ -8,7 +8,7 @@
},
"package": {
"productName": "creddy",
"version": "0.2.3"
"version": "0.3.0"
},
"tauri": {
"allowlist": {

View File

@ -1,113 +1,42 @@
<script>
export let color = 'base-content';
export let thickness = '2px';
export let thickness = 8;
let classes = '';
export { classes as class };
const colorVars = {
'primary': 'p',
'primary-focus': 'pf',
'primary-content': 'pc',
'secondary': 's',
'secondary-focus': 'sf',
'secondary-content': 'sc',
'accent': 'a',
'accent-focus': 'af',
'accent-content': 'ac',
'neutral': 'n',
'neutral-focus': 'nf',
'neutral-content': 'nc',
'base-100': 'b1',
'base-200': 'b2',
'base-300': 'b3',
'base-content': 'bc',
'info': 'in',
'info-content': 'inc',
'success': 'su',
'success-content': 'suc',
'warning': 'wa',
'warning-content': 'wac',
'error': 'er',
'error-content': 'erc',
}
let arcStyle = `border-width: ${thickness};`;
arcStyle += `border-color: hsl(var(--${colorVars[color]})) transparent transparent transparent;`;
const radius = (100 - thickness) / 2;
// the px are fake, but we need them to satisfy css calc()
const circumference = `${2 * Math.PI * radius}px`;
</script>
<style>
#spinner {
position: relative;
animation: spin;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
<svg
style:--circumference={circumference}
class={classes}
viewBox="0 0 100 100"
stroke="currentColor"
>
<circle cx="50" cy="50" r={radius} stroke-width={thickness} />
</svg>
<style>
circle {
fill: transparent;
stroke-dasharray: var(--circumference);
transform: rotate(-90deg);
transform-origin: center;
animation: chase 3s infinite,
spin 1.5s linear infinite;
}
@keyframes chase {
0% { stroke-dashoffset: calc(-1 * var(--circumference)); }
50% { stroke-dashoffset: calc(-2 * var(--circumference)); }
100% { stroke-dashoffset: calc(-3 * var(--circumference)); }
}
@keyframes spin {
50% { transform: rotate(225deg); }
100% { transform: rotate(360deg); }
50% { transform: rotate(135deg); }
100% { transform: rotate(270deg); }
}
.arc {
position: absolute;
top: 0;
left: 0;
border-radius: 9999px;
}
.arc-top {
transform: rotate(-45deg);
}
.arc-right {
animation: spin-right;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.arc-bottom {
animation: spin-bottom;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.arc-left {
animation: spin-left;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes spin-top {
0% { transform: rotate(-45deg); }
50% { transform: rotate(315deg); }
100% { transform: rotate(-45deg); }
}
@keyframes spin-right {
0% { transform: rotate(45deg); }
50% { transform: rotate(315deg); }
100% { transform: rotate(405deg); }
}
@keyframes spin-bottom {
0% { transform: rotate(135deg); }
50% { transform: rotate(315deg); }
100% { transform: rotate(495deg); }
}
@keyframes spin-left {
0% { transform: rotate(225deg); }
50% { transform: rotate(315deg); }
100% { transform: rotate(585deg); }
}
</style>
<div id="spinner" class="w-6 h-6 {classes}">
<div class="arc arc-top w-full h-full" style={arcStyle}></div>
<div class="arc arc-right w-full h-full" style={arcStyle}></div>
<div class="arc arc-bottom w-full h-full" style={arcStyle}></div>
<div class="arc arc-left w-full h-full" style={arcStyle}></div>
</div>
</style>

View File

@ -79,8 +79,8 @@
<input type="password" placeholder="Re-enter passphrase" bind:value={confirmPassphrase} class="input input-bordered" on:change={confirm} />
<button type="submit" class="btn btn-primary">
{#if saving}
<Spinner class="w-5 h-5" color="primary-content" thickness="2px"/>
{#if saving }
<Spinner class="w-5 h-5" thickness="12"/>
{:else}
Submit
{/if}

View File

@ -1,11 +1,6 @@
<script context="module">
import { type } from '@tauri-apps/api/os';
const osType = await type();
</script>
<script>
import { invoke } from '@tauri-apps/api/tauri';
import { type } from '@tauri-apps/api/os';
import { appState } from '../lib/state.js';
import Nav from '../ui/Nav.svelte';
@ -30,6 +25,9 @@
$appState.config = await invoke('get_config');
}
}
let osType = null;
type().then(t => osType = t);
</script>

View File

@ -76,7 +76,7 @@
<button type="submit" class="btn btn-primary">
{#if saving}
<Spinner class="w-5 h-5" color="primary-content" thickness="2px"/>
<Spinner class="w-5 h-5" thickness="12"/>
{:else}
Submit
{/if}

16
todo.md Normal file
View File

@ -0,0 +1,16 @@
## Definitely
* Switch to "process" provider for AWS credentials (much less hacky)
* Session timeout (plain duration, or activity-based?)
* Fix rehide behavior when new request comes in while old one is still being resolved
* Additional hotkey configuration (approve/deny at the very least)
* Logging
* Icon
* SSH key handling
## Maybe
* Flatten error type hierarchy
* Rehide after terminal launch from locked
* Generalize Request across both credentials and terminal launch?
* Make hotkey configuration a little more tolerant of slight mistiming