mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-18 20:59:39 +02:00
65e1bc6edd
* WIP * WIP * WIP * WIP * WIP * WIP * WIP * format * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * fix conflict * fix conflict * chore: run rubocop * fix test * update PWA logo * fix tests * chore: lint * fix test * Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index --------- Co-authored-by: Josh Pigford <josh@joshpigford.com>
62 lines
2.9 KiB
Text
62 lines
2.9 KiB
Text
<%# locals: (form:, user:) %>
|
|
|
|
<div class="flex md:flex-row flex-col md:items-center items-center gap-4" data-controller="profile-image-preview">
|
|
<div class="relative flex justify-center items-center bg-gray-50 size-26 md:size-24 rounded-full border-alpha-black-300 border border-dashed">
|
|
|
|
<%# The image preview once user has uploaded a new file %>
|
|
<div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
|
|
<img src="" alt="Preview" class="w-full h-full rounded-full object-cover">
|
|
</div>
|
|
|
|
<%# The placeholder image for empty avatar field %>
|
|
<div data-profile-image-preview-target="placeholderImage"
|
|
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
|
|
<div class="h-full w-full flex justify-center items-center">
|
|
<%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# The attached image if user has already uploaded one %>
|
|
<div data-profile-image-preview-target="attachedImage"
|
|
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "" : "hidden" %>">
|
|
<% if user.profile_image.attached? %>
|
|
<div class="h-full w-full">
|
|
<%= render "settings/user_avatar", user: user %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<button type="button"
|
|
data-profile-image-preview-target="clearBtn"
|
|
data-action="click->profile-image-preview#clearFileInput"
|
|
class="<%= user.profile_image.attached? ? "" : "hidden" %> cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
|
|
<%= lucide_icon "x", class: "w-4 h-4 text-secondary" %>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="md:text-left text-center">
|
|
<%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>
|
|
|
|
<%= form.label :profile_image, class: "btn btn--outline inline-block", data: { profile_image_preview_target: "uploadButton" } do %>
|
|
|
|
<%= lucide_icon "camera", class: "w-5 h-5 mr-2 inline-block", data: { profile_image_preview_target: "cameraIcon" } %>
|
|
<span data-profile-image-preview-target="uploadText">
|
|
<%= t(".choose") %> <span class="text-secondary"><%= t(".choose_label") %></span>
|
|
</span>
|
|
<span data-profile-image-preview-target="changeText" class="hidden" aria-hidden="true">
|
|
<%= t(".change") %>
|
|
</span>
|
|
<% end %>
|
|
|
|
|
|
<p class="mt-2 text-xs text-secondary"><%= t(".accepted_formats") %></p>
|
|
|
|
<%= form.file_field :profile_image,
|
|
accept: "image/png, image/jpeg",
|
|
class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",
|
|
data: {
|
|
profile_image_preview_target: "input",
|
|
action: "change->profile-image-preview#showFileInputPreview"
|
|
} %>
|
|
</div>
|
|
</div>
|