raucao/marco
1
0
Fork 0
Code Issues 17 Pull Requests Actions Releases 5 Activity

Rename component, clean up CSS

Browse Source
This commit is contained in:
Râu Cao
2026-04-21 09:28:34 +04:00
parent bb2411972f
commit 4c540bc713
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/place-photo-item.gjs → app/components/place-photo-upload-item.gjs
View File

@@ -13,7 +13,7 @@ const IMAGE_QUALITY = 0.94;
const MAX_THUMBNAIL_DIMENSION = 350; const MAX_THUMBNAIL_DIMENSION = 350;
const THUMBNAIL_QUALITY = 0.9; const THUMBNAIL_QUALITY = 0.9;
export default class PlacePhotoItem extends Component { export default class PlacePhotoUploadItem extends Component {
@service blossom; @service blossom;
@service imageProcessor; @service imageProcessor;
@service toast; @service toast;
@@ -106,14 +106,14 @@ export default class PlacePhotoItem extends Component {
<template> <template>
<div <div
class="photo-item class="photo-upload-item
{{if this.uploadTask.isRunning 'is-uploading'}} {{if this.uploadTask.isRunning 'is-uploading'}}
{{if this.error 'has-error'}}" {{if this.error 'has-error'}}"
> >
<img src={{this.thumbnailUrl}} alt="thumbnail" class="photo-item-img" /> <img src={{this.thumbnailUrl}} alt="thumbnail" />
{{#if this.uploadTask.isRunning}} {{#if this.uploadTask.isRunning}}
<div class="photo-item-overlay"> <div class="overlay">
<Icon <Icon
@name="loading-ring" @name="loading-ring"
@size={{24}} @size={{24}}
@@ -126,7 +126,7 @@ export default class PlacePhotoItem extends Component {
{{#if this.error}} {{#if this.error}}
<button <button
type="button" type="button"
class="photo-item-overlay error-overlay" class="overlay error-overlay"
title={{this.error}} title={{this.error}}
{{on "click" this.showErrorToast}} {{on "click" this.showErrorToast}}
> >

4
app/components/place-photo-upload.gjs
View File

@@ -6,7 +6,7 @@ import { on } from '@ember/modifier';
import { EventFactory } from 'applesauce-core'; import { EventFactory } from 'applesauce-core';
import { task } from 'ember-concurrency'; import { task } from 'ember-concurrency';
import Geohash from 'latlon-geohash'; import Geohash from 'latlon-geohash';
import PlacePhotoItem from './place-photo-item'; import PlacePhotoUploadItem from './place-photo-upload-item';
import Icon from '#components/icon'; import Icon from '#components/icon';
import { or, not } from 'ember-truth-helpers'; import { or, not } from 'ember-truth-helpers';
@@ -232,7 +232,7 @@ export default class PlacePhotoUpload extends Component {
{{#if this.files.length}} {{#if this.files.length}}
<div class="photo-grid"> <div class="photo-grid">
{{#each this.files as |file|}} {{#each this.files as |file|}}
<PlacePhotoItem <PlacePhotoUploadItem
@file={{file}} @file={{file}}
@onSuccess={{this.handleUploadSuccess}} @onSuccess={{this.handleUploadSuccess}}
@onRemove={{this.removeFile}} @onRemove={{this.removeFile}}

12
app/styles/app.css
View File

@@ -250,7 +250,7 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
} }
.photo-item { .photo-upload-item {
position: relative; position: relative;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
border-radius: 6px; border-radius: 6px;
@@ -258,14 +258,14 @@ body {
background: #1e262e; background: #1e262e;
} }
.photo-item-img { .photo-upload-item img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block; display: block;
} }
.photo-item-overlay { .photo-upload-item .overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgb(0 0 0 / 60%); background: rgb(0 0 0 / 60%);
@@ -274,7 +274,7 @@ body {
justify-content: center; justify-content: center;
} }
.error-overlay { .photo-upload-item .error-overlay {
background: rgb(224 108 117 / 80%); background: rgb(224 108 117 / 80%);
cursor: pointer; cursor: pointer;
border: none; border: none;
@@ -283,7 +283,7 @@ body {
width: 100%; width: 100%;
} }
.btn-remove-photo { .photo-upload-item .btn-remove-photo {
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 4px; right: 4px;
@@ -300,7 +300,7 @@ body {
padding: 0; padding: 0;
} }
.btn-remove-photo:hover { .photo-upload-item .btn-remove-photo:hover {
background: var(--marker-color-primary); background: var(--marker-color-primary);
} }