Skip to content

Commit

Permalink
Merge pull request #12 from cesaroeduardo/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@cesaroeduardo
cesaroeduardo authored Sep 12, 2024
2 parents a0ef7b9 + 3fc00b6 commit f4a4e09
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 106 deletions.
133 changes: 84 additions & 49 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,16 @@
<div class="w-full flex flex-col gap-4 md:gap-8">
<ul class="grid lg:grid-cols-5 md:grid-cols-3 grid-cols-3 gap-2 md:gap-4" id="myUL">
<icon-card
v-for="icon in icons"
:key="icon.name"
:name="icon.name"
:keywords="icon.keywords"
:icon="icon.icon"
:color="IconsColor"
:size="selectedFontSize"
:download-format="downloadFormat"
>
<i :class="'' + icon.icon + ' ' + selectedFontSize" :style="{ color: IconsColor }"></i>
v-for="icon in icons"
:key="icon.name"
:name="icon.name"
:keywords="icon.keywords"
:icon="icon.icon"
:color="IconsColor"
:size="`${selectedFontSize}px`"
:download-format="downloadFormat"
>
<i :class="'' + icon.icon" :style="{ fontSize: selectedFontSize + 'px', color: IconsColor }"></i>
</icon-card>
</ul>
<div class="text-neutral-700 dark:text-neutral-200 opacity-40 gap-2 w-full text-center justify-center items-center min-h-28 border border-neutral-200 dark:border-neutral-700 bg-neutral-100/60 dark:bg-neutral-800/60 rounded-md text-xs flex px-4 py-8 ">
Expand All @@ -55,14 +55,21 @@
</div>
<!-- Comandos -->
<div class="flex-col gap-3 w-full md:flex-col md:w-64 md:sticky top-28 md:h-60 z-10 hidden md:flex">
<div class="select-container w-full">
<i class="pi pi-arrows-h mr-8"></i>
<select v-model="selectedFontSize" class="w-full">
<option v-for="fontSize in fontSizes" :key="fontSize.value" :value="fontSize.value">
{{ fontSize.name }} ({{ fontSize.value }})
</option>
</select>
<i class="pi pi-chevron-down select-icon"></i>
<div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
<i class="pi pi-arrows-h text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
<!-- Slider -->
<div class="flex flex-row w-full items-center gap-2">
<input
type="range"
v-model="sliderValue"
min="0"
max="11"
@input="updateFontSize"
class="w-full slider-input"
style="cursor: grab;"
/>
<p class="text-neutral-500 text-xs dark:text-neutral-400 w-12 text-left">{{ selectedFontSize }}px</p>
</div>
</div>
<div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
<i class="pi pi-palette text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
Expand All @@ -72,15 +79,15 @@
<i class="pi pi-cog text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
<div class="radio-group">
<label class="w-full">
<input type="radio" value="svg" class="radio" v-model="downloadFormat" checked />
<input type="radio" value="png" class="radio" v-model="downloadFormat" checked />
<div class="radio-container text-white p-8 checked:text-yellow-400">
.svg
.png
</div>
</label>
<label class="w-full">
<input type="radio" value="png" class="radio" v-model="downloadFormat" />
<input type="radio" value="svg" class="radio" v-model="downloadFormat" />
<div class="radio-container">
.png
.svg
</div>
</label>
</div>
Expand All @@ -93,14 +100,20 @@
<div v-if="openBottombar" class="flex w-full h-fit bottom-0 fixed bg-white z-30 rounded-t-xl md:hidden bg-neutral-300/90 dark:bg-neutral-800/90 border border-neutral-200 dark:border-neutral-600">
<div class="flex flex-col gap-3 w-full md:flex-col md:w-64 md:sticky top-28 md:h-60 z-10 px-4 pt-6 pb-8">
<!-- Comandos -->
<div class="select-container w-full">
<i class="pi pi-arrows-h mr-8"></i>
<select v-model="selectedFontSize" class="w-full">
<option v-for="fontSize in fontSizes" :key="fontSize.value" :value="fontSize.value">
{{ fontSize.name }} ({{ fontSize.value }})
</option>
</select>
<i class="pi pi-chevron-down select-icon"></i>
<div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
<i class="pi pi-arrows-h text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
<!-- Slider for mobile -->
<div class="flex flex-row w-full items-center gap-2">
<input
type="range"
v-model="sliderValue"
min="0"
max="11"
@input="updateFontSize"
class="w-full slider-input"
/>
<p class="text-neutral-500 dark:text-neutral-400 w-10 text-xs">{{ selectedFontSize }}px</p>
</div>
</div>
<div class="flex items-center gap-4 bg-neutral-100/60 py-2 border border-neutral-200 rounded-lg px-2.5 dark:bg-neutral-800/60 dark:border-neutral-700">
<i class="pi pi-palette text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
Expand All @@ -110,15 +123,15 @@
<i class="pi pi-cog text-xs ml-1 text-neutral-700 dark:text-neutral-400"></i>
<div class="radio-group">
<label class="w-full">
<input type="radio" value="svg" class="radio" v-model="downloadFormat" checked />
<input type="radio" value="png" class="radio" v-model="downloadFormat" checked />
<div class="radio-container text-white p-8 checked:text-yellow-400">
.svg
.png
</div>
</label>
<label class="w-full">
<input type="radio" value="png" class="radio" v-model="downloadFormat" />
<input type="radio" value="svg" class="radio" v-model="downloadFormat" />
<div class="radio-container">
.png
.svg
</div>
</label>
</div>
Expand Down Expand Up @@ -154,22 +167,12 @@ export default {
{ top: '20%', left: '90%' },
{ top: '80%', left: '20%' }
],
selectedFontSize: 'text-base',
selectedFontSize: 20, // Default font size
sliderValue: 2, // Default value in the exponential range
fontSizeValues: [8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 320], // Exponential values
icons: icons,
fontSizes: [
{ name: '12px', value: 'text-xs' },
{ name: '16px', value: 'text-sm' },
{ name: '20px', value: 'text-base' },
{ name: '24px', value: 'text-lg' },
{ name: '28px', value: 'text-xl' },
{ name: '32px', value: 'text-2xl' },
{ name: '40px', value: 'text-3xl' },
{ name: '48px', value: 'text-4xl' },
{ name: '56px', value: 'text-5xl' },
{ name: '64px', value: 'text-6xl' },
],
pureColor: 'rgb(133, 133, 133)',
downloadFormat: 'svg',
downloadFormat: 'png',
openBottombar: false
}
},
Expand All @@ -183,8 +186,11 @@ export default {
toggleTheme,
toggleBottombar() {
this.openBottombar = !this.openBottombar;
},
updateFontSize() {
this.selectedFontSize = this.fontSizeValues[this.sliderValue];
}
},
}
}
</script>

Expand All @@ -196,4 +202,33 @@ export default {
filter: blur(300px);
position: absolute;
}
.slider-input {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 0px;
border-radius: 4px;
transition: background 0.3s ease;
@apply dark:bg-neutral-300 bg-neutral-300
}
.slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
cursor: grab;
@apply dark:bg-black bg-neutral-600
}
.slider-input::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
cursor: grab;
@apply dark:bg-neutral-800 bg-neutral-600
}
</style>

85 changes: 28 additions & 57 deletions src/components/IconCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default {
},
size: {
type: String,
required: true,
required: true, // Esse "size" pode ser uma classe do Tailwind CSS
},
downloadFormat: {
type: String,
Expand All @@ -60,6 +60,29 @@ export default {
};
},
methods: {
// Extração do valor em pixels de uma string no formato `text-[XXpx]`
getPixelSize(sizeClass) {
if (typeof sizeClass === 'string' && sizeClass.endsWith('px')) {
return parseInt(sizeClass.replace('px', ''), 10);
}
return sizeClass; // Se já for um número ou outra unidade que não é px, retorna diretamente
},
// Mapeia as classes do Tailwind para tamanhos reais em pixels
getDimension(sizeClass) {
const sizeMap = {
'text-xs': 12,
'text-sm': 16,
'text-base': 20,
'text-lg': 24,
'text-xl': 28,
'text-2xl': 32,
'text-3xl': 40,
'text-4xl': 48,
'text-5xl': 56,
'text-6xl': 64,
};
return sizeMap[sizeClass] || 100; // Valor padrão caso a classe não seja mapeada
},
async downloadIcon() {
if (this.downloadFormat === 'svg') {
this.downloadSVG();
Expand All @@ -82,19 +105,7 @@ export default {
svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
}
const sizeMap = {
'text-xs': 12,
'text-sm': 16,
'text-base': 20,
'text-lg': 24,
'text-xl': 28,
'text-2xl': 32,
'text-3xl': 40,
'text-4xl': 48,
'text-5xl': 56,
'text-6xl': 64,
};
const dimension = sizeMap[this.size] || 100;
const dimension = this.getPixelSize(this.size); // Usa o valor correto em pixels
if (!svg.includes('width=')) {
svg = svg.replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
Expand Down Expand Up @@ -125,19 +136,7 @@ export default {
svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
const sizeMap = {
'text-xs': 12,
'text-sm': 16,
'text-base': 20,
'text-lg': 24,
'text-xl': 28,
'text-2xl': 32,
'text-3xl': 40,
'text-4xl': 48,
'text-5xl': 56,
'text-6xl': 64,
};
const dimension = sizeMap[this.size] || 100;
const dimension = this.getDimension(this.size); // Usa o tamanho correto
svg = svg.replace(/(width|height)="[^"]*"/g, '')
.replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
Expand Down Expand Up @@ -192,26 +191,13 @@ export default {
let svg = await response.text();
// Verifica e modifica o SVG para garantir que tenha 'fill' e o tamanho correto
if (!svg.includes('fill=')) {
svg = svg.replace(/<path/g, `<path fill="${this.color}"`);
} else {
svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
}
const sizeMap = {
'text-xs': 12,
'text-sm': 16,
'text-base': 20,
'text-lg': 24,
'text-xl': 28,
'text-2xl': 32,
'text-3xl': 40,
'text-4xl': 48,
'text-5xl': 56,
'text-6xl': 64,
};
const dimension = sizeMap[this.size] || 100;
const dimension = this.getPixelSize(this.size); // Usa o valor correto em pixels
if (!svg.includes('width=')) {
svg = svg.replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
Expand All @@ -220,11 +206,9 @@ export default {
.replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
}
// Copiamos o conteúdo SVG modificado como texto para o clipboard
await navigator.clipboard.writeText(svg);
console.log('SVG content copied to clipboard!');
// Muda o ícone para "check" após a cópia
this.showImageCheckIcon = true;
setTimeout(() => {
this.showImageCheckIcon = false;
Expand All @@ -242,19 +226,7 @@ export default {
svg = svg.replace(/fill="[^"]*"/g, `fill="${this.color}"`);
const sizeMap = {
'text-xs': 12,
'text-sm': 16,
'text-base': 20,
'text-lg': 24,
'text-xl': 28,
'text-2xl': 32,
'text-3xl': 40,
'text-4xl': 48,
'text-5xl': 56,
'text-6xl': 64,
};
const dimension = sizeMap[this.size] || 100;
const dimension = this.getPixelSize(this.size); // Usa o valor correto em pixels
svg = svg.replace(/(width|height)="[^"]*"/g, '')
.replace(/<svg/, `<svg width="${dimension}" height="${dimension}"`);
Expand All @@ -272,7 +244,6 @@ export default {
await navigator.clipboard.write([clipboardItem]);
console.log('PNG copied to clipboard!');
// Muda o ícone para "check" após a cópia
this.showImageCheckIcon = true;
setTimeout(() => {
this.showImageCheckIcon = false;
Expand Down

0 comments on commit f4a4e09

Please sign in to comment.