feat: add keyboard shortcut Cmd/Ctrl+S to SaveButton
- Add Cmd+S (Mac) or Ctrl+S (Windows/Linux) keyboard shortcut to save CSS - Detect platform to display correct shortcut symbol (⌘ or Ctrl) - Prevent default browser save behavior - Translate tooltips to French - Show shortcut in button tooltip Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
cb5d056b51
commit
9127520ff7
1 changed files with 32 additions and 6 deletions
|
|
@ -39,7 +39,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
|
||||
const stylesheetStore = useStylesheetStore();
|
||||
|
|
@ -51,6 +51,10 @@ const lastSavedFormatted = computed(() => stylesheetStore.lastSavedFormatted);
|
|||
const hasError = computed(() => !!saveError.value);
|
||||
const showSuccess = ref(false);
|
||||
|
||||
// Detect platform for keyboard shortcut display
|
||||
const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
const shortcutKey = isMac ? '⌘' : 'Ctrl';
|
||||
|
||||
const handleSave = async () => {
|
||||
const result = await stylesheetStore.saveCustomCss();
|
||||
|
||||
|
|
@ -64,12 +68,34 @@ const handleSave = async () => {
|
|||
// Errors are handled in the store and reflected in hasError
|
||||
};
|
||||
|
||||
const getTooltip = () => {
|
||||
if (!isDirty.value) return 'No changes to save';
|
||||
if (isSaving.value) return 'Saving...';
|
||||
if (hasError.value) return saveError.value;
|
||||
return 'Save custom CSS';
|
||||
const handleKeyDown = (event) => {
|
||||
// Check for Cmd+S (Mac) or Ctrl+S (Windows/Linux)
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === 's') {
|
||||
event.preventDefault();
|
||||
|
||||
// Only save if there are changes and not currently saving
|
||||
if (isDirty.value && !isSaving.value) {
|
||||
handleSave();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getTooltip = () => {
|
||||
if (!isDirty.value) return 'Aucune modification à enregistrer';
|
||||
if (isSaving.value) return 'Enregistrement...';
|
||||
if (hasError.value) return saveError.value;
|
||||
return `Enregistrer le CSS personnalisé (${shortcutKey}+S)`;
|
||||
};
|
||||
|
||||
// Add keyboard listener on mount
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
});
|
||||
|
||||
// Remove keyboard listener on unmount
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue