TPsoft.org/Mozaic
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pridana ikonka, screenshot a popis do README.md

Browse Source
This commit is contained in:
Igor Miňo
2026-08-01 10:12:27 +02:00
parent a5973a5168
commit fc877c99ce
14 changed files with 400 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/assets/mozaic-logo.svg Normal file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Mozaic">
<defs>
<clipPath id="tile-frame">
<rect x="36" y="36" width="440" height="440" rx="88"/>
</clipPath>
</defs>
<rect x="16" y="16" width="480" height="480" rx="112" fill="#172033"/>
<g clip-path="url(#tile-frame)" stroke="#172033" stroke-width="24" stroke-linejoin="round">
<path d="M24 24h226l-24 210L24 202Z" fill="#F16C5B"/>
<path d="M250 24h238v184L226 234Z" fill="#36A99A"/>
<path d="M24 202l202 32-24 254H24Z" fill="#4386D8"/>
<path d="M226 234l104-34 70 126-142 80-56-92Z" fill="#F2C14E"/>
<path d="M330 200l158 8v280H202l56-82 142-80Z" fill="#8A6FBC"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 709 B

5
frontend/src/components/EditorToolbar.vue
View File

@ -2,6 +2,7 @@
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMosaicStore } from '@/stores/mosaic'
import mozaicLogo from '@/assets/mozaic-logo.svg'
defineEmits<{ resetViewport: [] }>()
const store = useMosaicStore()
@ -22,7 +23,7 @@ function importProject(files: FileList | null): void {
<template>
<header class="toolbar">
<div class="brand"><span class="brand-mark">M</span><span>Mozaic</span></div>
<div class="brand"><img class="brand-mark" :src="mozaicLogo" alt="" width="32" height="32" /><span>Mozaic</span></div>
<div class="toolbar-actions">
<button class="button primary" type="button" @click="imageInput?.click()">Načítať obrázok</button>
<button class="icon-button" type="button" :disabled="!canUndo" title="Späť (Ctrl+Z)" @click="store.undo">↶</button>
@ -40,7 +41,7 @@ function importProject(files: FileList | null): void {
<style scoped>
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 58px; align-items: center; gap: 24px; padding: 8px 16px; border-bottom: 1px solid #dbe1e8; background: rgba(255,255,255,.96); }
.brand { display: flex; align-items: center; gap: 9px; color: #172033; font-weight: 760; letter-spacing: -.02em; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #1e293b; color: white; }
.brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
.toolbar-actions { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-x: auto; }
.divider { width: 1px; height: 26px; margin: 0 2px; background: #dbe1e8; }
@media (max-width: 700px) { .toolbar { align-items: flex-start; gap: 10px; padding: 8px 10px; } .brand span:last-child { display: none; } }