Commit 1d1ae465 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

Merge branch 'feature/changeImage' into 'main' 

Add feature to change image

See merge request d.malygin/motion!3
parents 7482aa65 90d780cb

components.d.ts

+2 −1
Original line number Diff line number Diff line
@@ -2,13 +2,14 @@ 
// @ts-nocheck

// Generated by unplugin-vue-components

// Read more: https://github.com/vuejs/core/pull/3399

export {}

export {};



/* prettier-ignore */

declare module 'vue' {

  export interface GlobalComponents {

    Avatar: typeof import('primevue/avatar')['default']

    Button: typeof import('primevue/button')['default']

    CreateEntityMenu: typeof import('./src/components/CreateEntityMenu.vue')['default']

    Divider: typeof import('primevue/divider')['default']

    Drawer: typeof import('primevue/drawer')['default']

    LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']

public/favicon.ico

+158 KiB (422 KiB)
Loading image diff...

src/assets/Motion.svg

+202 −71

File changed.

Preview size limit exceeded, changes collapsed.

src/helpers /index.ts

0 → 100644
+25 −0
Original line number Diff line number Diff line 
import { useInterfaceStore } from '@/stores/interface';

import type { IEntity } from '@/interfaces/environment';



export async function uploadFile($event: Event) {

  const target = $event.target as HTMLInputElement;

  if (target && target.files && target.files[0]) {

    const file = target.files[0];

    const reader = new FileReader();

    reader.readAsDataURL(file);

    reader.addEventListener('load', () => {

      const url = reader.result;

      const interfaceStore = useInterfaceStore();

      interfaceStore.changeHomeBackgroundUrl(url);

      localStorage.setItem('homeBackgroundUrl', url);

    });

  }

}



export function setDefaultHomeBackground() {

  const interfaceStore = useInterfaceStore();

  interfaceStore.changeHomeBackgroundUrl(

    'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg'

  );

  localStorage.removeItem('homeBackgroundUrl');

}

src/output.css

+205 −106
Original line number Diff line number Diff line
@@ -588,10 +588,6 @@ video { 
  }

}



.pointer-events-none {

  pointer-events: none;

}



.\!visible {

  visibility: visible !important;

}
@@ -620,24 +616,70 @@ video { 
  left: 0px;

}



.right-0 {

  right: 0px;

}



.top-0 {

  top: 0px;

}



.right-2 {

  right: 0.5rem;

}



.top-2 {

  top: 0.5rem;

}



.right-8 {

  right: 2rem;

}



.top-8 {

  top: 2rem;

}



.top-16 {

  top: 4rem;

}



.top-12 {

  top: 3rem;

}



.z-10 {

  z-index: 10;

}



.-m-2 {

  margin: -0.5rem;

}



.-m-4 {

  margin: -1rem;

.-my-4 {

  margin-top: -1rem;

  margin-bottom: -1rem;

}



.-my-2 {

  margin-top: -0.5rem;

  margin-bottom: -0.5rem;

}



.-mb-2 {

  margin-bottom: -0.5rem;

}



.mb-6 {

  margin-bottom: 1.5rem;

}



.ml-8 {

  margin-left: 2rem;

.ml-0 {

  margin-left: 0px;

}



.ml-\[58px\] {

  margin-left: 58px;

}



.ml-auto {
@@ -648,54 +690,46 @@ video { 
  margin-right: 0.5rem;

}



.ml-16 {

  margin-left: 4rem;

}



.ml-14 {

  margin-left: 3.5rem;

.mt-4 {

  margin-top: 1rem;

}



.ml-\[60px\] {

  margin-left: 60px;

.mt-1 {

  margin-top: 0.25rem;

}



.ml-\[58px\] {

  margin-left: 58px;

.-mr-24 {

  margin-right: -6rem;

}



.mt-2 {

  margin-top: 0.5rem;

.-mr-48 {

  margin-right: -12rem;

}



.mt-4 {

  margin-top: 1rem;

.-mr-36 {

  margin-right: -9rem;

}



.-mb-4 {

  margin-bottom: -1rem;

.-ml-2 {

  margin-left: -0.5rem;

}



.-mb-2 {

  margin-bottom: -0.5rem;

.-mr-\[120px\] {

  margin-right: -120px;

}



.ml-0 {

  margin-left: 0px;

.-mr-\[130px\] {

  margin-right: -130px;

}



.mt-8 {

  margin-top: 2rem;

.-mr-\[135px\] {

  margin-right: -135px;

}



.block {

  display: block;

}



.inline-block {

  display: inline-block;

}



.flex {

  display: flex;

}
@@ -708,30 +742,56 @@ video { 
  display: table;

}



.hidden {

  display: none;

}



.size-12 {

  width: 3rem;

  height: 3rem;

}



.size-full {

  width: 100%;

  height: 100%;

.size-24 {

  width: 6rem;

  height: 6rem;

}



.size-8 {

  width: 2rem;

  height: 2rem;

}



.size-48 {

  width: 12rem;

  height: 12rem;

}



.h-full {

  height: 100%;

}



.min-h-\[200px\] {

  min-height: 200px;

.h-24 {

  height: 6rem;

}



.w-20 {

  width: 5rem;

}



.w-full {

  width: 100%;

}



.w-20 {

  width: 5rem;

.w-24 {

  width: 6rem;

}



.w-4 {

  width: 1rem;

}



.w-2 {

  width: 0.5rem;

}



.cursor-pointer {
@@ -744,10 +804,6 @@ video { 
          user-select: none;

}



.resize-y {

  resize: vertical;

}



.flex-col {

  flex-direction: column;

}
@@ -760,6 +816,10 @@ video { 
  align-items: center;

}



.justify-end {

  justify-content: flex-end;

}



.justify-center {

  justify-content: center;

}
@@ -772,10 +832,6 @@ video { 
  gap: 0.5rem;

}



.overflow-hidden {

  overflow: hidden;

}



.rounded {

  border-radius: 0.25rem;

}
@@ -784,63 +840,60 @@ video { 
  border-radius: 0.375rem;

}



.rounded-lg {

  border-radius: 0.5rem;

}



.border {

  border-width: 1px;

}



.bg-blue-500 {

  --tw-bg-opacity: 1;

  background-color: rgb(59 130 246 / var(--tw-bg-opacity));

.border-2 {

  border-width: 2px;

}



.bg-white {

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity));

.border-solid {

  border-style: solid;

}



.bg-gray-500 {

  --tw-bg-opacity: 1;

  background-color: rgb(107 114 128 / var(--tw-bg-opacity));

.border-black {

  --tw-border-opacity: 1;

  border-color: rgb(0 0 0 / var(--tw-border-opacity));

}



.bg-gray-400 {

.bg-sky-900 {

  --tw-bg-opacity: 1;

  background-color: rgb(156 163 175 / var(--tw-bg-opacity));

  background-color: rgb(12 74 110 / var(--tw-bg-opacity));

}



.bg-gray-600 {

.bg-white {

  --tw-bg-opacity: 1;

  background-color: rgb(75 85 99 / var(--tw-bg-opacity));

  background-color: rgb(255 255 255 / var(--tw-bg-opacity));

}



.bg-sky-600 {

.bg-blue-900 {

  --tw-bg-opacity: 1;

  background-color: rgb(2 132 199 / var(--tw-bg-opacity));

  background-color: rgb(30 58 138 / var(--tw-bg-opacity));

}



.bg-sky-700 {

.bg-blue-950 {

  --tw-bg-opacity: 1;

  background-color: rgb(3 105 161 / var(--tw-bg-opacity));

  background-color: rgb(23 37 84 / var(--tw-bg-opacity));

}



.bg-sky-800 {

.bg-black {

  --tw-bg-opacity: 1;

  background-color: rgb(7 89 133 / var(--tw-bg-opacity));

  background-color: rgb(0 0 0 / var(--tw-bg-opacity));

}



.bg-sky-950 {

.bg-blue-500 {

  --tw-bg-opacity: 1;

  background-color: rgb(8 47 73 / var(--tw-bg-opacity));

  background-color: rgb(59 130 246 / var(--tw-bg-opacity));

}



.bg-sky-900 {

.bg-blue-600 {

  --tw-bg-opacity: 1;

  background-color: rgb(12 74 110 / var(--tw-bg-opacity));

}



.object-cover {

  -o-object-fit: cover;

     object-fit: cover;

  background-color: rgb(37 99 235 / var(--tw-bg-opacity));

}



.p-2 {
@@ -856,33 +909,53 @@ video { 
  padding-bottom: 1rem;

}



.py-5 {

  padding-top: 1.25rem;

  padding-bottom: 1.25rem;

.py-2 {

  padding-top: 0.5rem;

  padding-bottom: 0.5rem;

}



.pl-0 {

  padding-left: 0px;

}



.pr-2 {

  padding-right: 0.5rem;

}



.pl-4 {

  padding-left: 1rem;

.pt-6 {

  padding-top: 1.5rem;

}



.pl-0 {

  padding-left: 0px;

.pt-1 {

  padding-top: 0.25rem;

}



.pr-24 {

  padding-right: 6rem;

}



.pr-48 {

  padding-right: 12rem;

}



.pr-36 {

  padding-right: 9rem;

}



.pb-14 {

  padding-bottom: 3.5rem;

.pl-2 {

  padding-left: 0.5rem;

}



.pb-20 {

  padding-bottom: 5rem;

.pr-\[120px\] {

  padding-right: 120px;

}



.pb-16 {

  padding-bottom: 4rem;

.pr-\[130px\] {

  padding-right: 130px;

}



.pr-\[135px\] {

  padding-right: 135px;

}



.text-center {
@@ -904,26 +977,17 @@ video { 
  line-height: 1.75rem;

}



.text-lg {

  font-size: 1.125rem;

  line-height: 1.75rem;

}



.font-semibold {

  font-weight: 600;

}



.font-bold {

  font-weight: 700;

}



.leading-\[0\] {

  line-height: 0;

.font-semibold {

  font-weight: 600;

}



.text-gray-500 {

.text-gray-400 {

  --tw-text-opacity: 1;

  color: rgb(107 114 128 / var(--tw-text-opacity));

  color: rgb(156 163 175 / var(--tw-text-opacity));

}



.text-white {
@@ -931,11 +995,46 @@ video { 
  color: rgb(255 255 255 / var(--tw-text-opacity));

}



.text-gray-400 {

  --tw-text-opacity: 1;

  color: rgb(156 163 175 / var(--tw-text-opacity));

.opacity-0 {

  opacity: 0;

}



.transition-all {

  transition-property: all;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}



.transition {

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;

}



.hover\:cursor-pointer:hover {

  cursor: pointer;

}



.hover\:text-gray-400:hover {

  --tw-text-opacity: 1;

  color: rgb(156 163 175 / var(--tw-text-opacity));

}



.hover\:text-gray-300:hover {

  --tw-text-opacity: 1;

  color: rgb(209 213 219 / var(--tw-text-opacity));

}



.hover\:opacity-50:hover {

  opacity: 0.5;

}



.hover\:opacity-20:hover {

  opacity: 0.2;

}



.hover\:opacity-90:hover {

  opacity: 0.9;

}
 
 No newline at end of file