nfoert · ar4s · Oct 7, 2024
diff --git a/cardie/main/templates/beta/base.html b/cardie/main/templates/beta/base.html
@@ -0,0 +1,32 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+  <head>
+    {% block head_scripts %}
+    {% endblock head_scripts %}
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static '/main/variables.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static '/main/ui.css' %}">
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static '/main/footer.css' %}">
+    {% block stylesheets %}{% endblock %}
+    <link rel="shortcut icon"
+          type="image/png"
+          href="{% static '/main/images/favicon_light.ico' %}" />
+    <meta name="darkreader-lock">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="{% url "config_js" %}"></script>
+    <title>Cardie |
+      {% block head_title %}{% endblock %}
+    </title>
+  </head>
+  <body>
+
+    {% block body %}{% endblock %}
+    {% comment %} {% include "footer.html" %} {% endcomment %}
+    {% block scripts %}{% endblock %}
+  </body>
+</html>
diff --git a/cardie/main/templates/beta/editor.html b/cardie/main/templates/beta/editor.html
@@ -0,0 +1,50 @@
+{% extends "beta/base.html" %}
+
+{% load static %}
+
+{% block stylesheets %}
+  <link rel="stylesheet" type="text/css" href="{% static 'main/card.css' %}">
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/editor.css' %}">
+{% endblock %}
+
+{% block body %}
+  <div id="editor_header">
+    <div id="editor_header_title">
+      <button class="ui_button_icon"
+              id="editor_header_title_home"
+              data-tippy-content="Go back to the home page">
+        <i class="ph-bold ph-house"></i>
+      </button>
+      <img id="editor_header_title_image"
+           src="/static/main/images/logo_light.png">
+      <p id="editor_header_title_text">Editor</p>
+    </div>
+  </div>
+  <div id="editor_main">
+    <div id="editor_main_settings">
+      <cardie-editor-layout></cardie-editor-layout>
+      <cardie-editor-details></cardie-editor-details>
+      <cardie-editor-colors></cardie-editor-colors>
+      <cardie-editor-items></cardie-editor-items>
+    </div>
+    <div id="editor_main_preview">
+      <div class="card_wrap">
+        <cardie-card></cardie-card>
+      </div>
+    </div>
+
+  </div>
+{% endblock %}
+
+{% block scripts %}
+  <script type="importmap">
+  {
+    "imports": {
+      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+    }
+  }
+  </script>
+  <script type="module" src="{% static 'beta/editor.js' %}"></script>
+{% endblock %}
diff --git a/cardie/main/urls.py b/cardie/main/urls.py
@@ -24,4 +24,5 @@
     path("getwallet", views.get_wallet, name="getwallet"),
     path("removefromwallet", views.remove_from_wallet, name="removefromwallet"),
     path("config.js", views.config_js, name="config_js"),
+    path("beta/editor", views.beta_editor, name="beta_editor"),
 ]
diff --git a/cardie/main/views.py b/cardie/main/views.py
@@ -350,3 +350,7 @@ def remove_from_wallet(request):
 
 def config_js(request):
     return render(request, "config.js", {}, content_type="text/javascript")
+
+
+def beta_editor(request):
+    return render(request, "beta/editor.html")
diff --git a/cardie/static/beta/card.js b/cardie/static/beta/card.js
@@ -0,0 +1,21 @@
+import { store } from "./store.js";
+
+export default {
+	data() {
+		return { store, flipped: false };
+	},
+  methods: {
+    flip() {
+      this.flipped = !this.flipped;
+    },
+  },
+	template: `<div
+    @click="flip()"
+    class="card_card"
+    :style="store.computedStyles"
+    :class="{card_flipped: this.flipped}"
+  >
+    <cardie-card-front />
+    <cardie-card-back />
+  </div>`,
+};
diff --git a/cardie/static/beta/card_back.js b/cardie/static/beta/card_back.js
@@ -0,0 +1,14 @@
+import { store } from "./store.js";
+
+export default {
+	data() {
+		return { store };
+	},
+	template: `<div
+    class="card_card_back"
+    :style="{
+      backgroundColor: store.card.colors.background,
+    }"
+    >
+    </div>`,
+};
diff --git a/cardie/static/beta/card_front.js b/cardie/static/beta/card_front.js
@@ -0,0 +1,22 @@
+import { store } from "./store.js";
+
+export default {
+	data() {
+		return { store };
+	},
+	template: `<div
+    class="card_card_front"
+    :card-align="store.card.front.align"
+    :style="{
+      backgroundColor: store.card.colors.background,
+    }"
+  >
+    <div class="card_top_text" :style="{
+      fontFamily: store.card.styles.fontFamily,
+      color: store.card.colors.text,
+    }">
+      <p class="card_top_text_username">{{ store.card.front.title }}</p>
+      <p class="card_top_text_pronouns">{{ store.card.front.subTitle }}</p>
+    </div>
+  </div>`,
+};
diff --git a/cardie/static/beta/editor.js b/cardie/static/beta/editor.js
@@ -0,0 +1,20 @@
+import { createApp } from "vue";
+import card from "./card.js";
+import card_back from "./card_back.js";
+import card_front from "./card_front.js";
+import editor_colors from "./editor_colors.js";
+import editor_details from "./editor_details.js";
+import editor_items from "./editor_items.js";
+import editor_items_item from "./editor_items_item.js";
+import editor_layout from "./layout.js";
+
+const app = createApp();
+app.component("cardie-card", card);
+app.component("cardie-card-front", card_front);
+app.component("cardie-card-back", card_back);
+app.component("cardie-editor-details", editor_details);
+app.component("cardie-editor-layout", editor_layout);
+app.component("cardie-editor-colors", editor_colors);
+app.component("cardie-editor-items", editor_items);
+app.component("cardie-editor-items-item", editor_items_item);
+app.mount("#editor_main");
diff --git a/cardie/static/beta/editor_colors.js b/cardie/static/beta/editor_colors.js
@@ -0,0 +1,19 @@
+import { store } from "./store.js";
+
+export default {
+  data() {
+    return { store };
+  },
+  template: `<div class="editor_main_setting" id="editor_main_settings_colors">
+                <p class="ui_text_subheader_left">
+                    <i class="ph-bold ph-palette"></i> Colors
+                </p>
+                <div class="ui_separator_horizontal"></div>
+                <p class="ui_text_description">Background color</p>
+                <input type="color" class="ui_input_generic" id="editor_main_settings_colors_background" data-tippy-content="Change the background color on your card" v-model="store.card.colors.background">
+                <p class="ui_text_description">Accent color</p>
+                <input type="color" class="ui_input_generic" id="editor_main_settings_colors_accent" data-tippy-content="Change the accent color on your card, this is used for the colors of the icons" v-model="store.card.colors.accent">
+                <p class="ui_text_description">Text color</p>
+                <input type="color" class="ui_input_generic" id="editor_main_settings_colors_text" data-tippy-content="Change the text color on your card" v-model="store.card.colors.text">
+            </div>`
+}
diff --git a/cardie/static/beta/editor_details.js b/cardie/static/beta/editor_details.js
@@ -0,0 +1,27 @@
+import { store } from "./store.js";
+
+export default {
+  data() {
+    return { store };
+  },
+  template: `<div class="editor_main_setting" id="editor_main_settings_details">
+    <p class="ui_text_subheader_left">
+      <i class="ph-bold ph-text-aa"></i> Details
+    </p>
+    <div class="ui_separator_horizontal"></div>
+    <input
+      v-model="store.card.front.title"
+      type="text"
+      class="ui_input_generic"
+      placeholder="Primary text"
+      data-tippy-content="Perfect for your name or username"
+    >
+    <input
+      v-model="store.card.front.subTitle"
+      type="text"
+      class="ui_input_generic"
+      placeholder="Secondary text"
+      data-tippy-content="Perfect for your job title or pronouns"
+    >
+  </div>`
+}
diff --git a/cardie/static/beta/editor_items.js b/cardie/static/beta/editor_items.js
@@ -0,0 +1,21 @@
+import { store } from "./store.js";
+
+export default {
+	data() {
+		return { store };
+	},
+	template: `
+  <div class="editor_main_setting" id="editor_main_settings_items" x-data="textItemsComponent()" x-init="init()" @end="updatePositions">
+    <p class="ui_text_subheader_left">
+        <i class="ph-bold ph-list-bullets"></i> Items
+    </p>
+    <div class="ui_separator_horizontal"></div>
+    <div id="editor_main_settings_items_items">
+      <cardie-editor-items-item :item="item" v-for="item in store.card.items"></cardie-editor-items-item>
+    </div>
+    <button @click="store.addItem()" id="editor_main_settings_information_text_add" class="ui_button_small">
+        <i class="ph-bold ph-plus-circle"></i> Add item
+    </button>
+</div>
+`,
+};
diff --git a/cardie/static/beta/editor_items_item.js b/cardie/static/beta/editor_items_item.js
@@ -0,0 +1,52 @@
+import { store } from "./store.js";
+
+export default {
+	data() {
+		return { store, menuOpen: false };
+	},
+	methods: {
+		changeType() {
+			if (this.item.value.type === "text") {
+				this.item.value.type = "url";
+			} else {
+				this.item.value.type = "text";
+			}
+		},
+	},
+	props: ["item"],
+	template: `<div class="item" :uuid="item.id">
+    <div class="item_item">
+        <p class="ui_button_small" x-sort:handle="">
+            <i class="ph-bold ph-dots-six-vertical"></i>
+        </p>
+        <input type="text" placeholder="Text" class="ui_input_generic text_item_text" v-model="item.value.text">
+        <input v-if="item.value.type == 'url'" type="text" placeholder="URL" class="ui_input_generic text_item_text" v-model="item.value.url">
+        <button class="ui_button_smallicon" @click="menuOpen = !menuOpen">
+            <i class="ph-bold ph-list"></i>
+        </button>
+    </div>
+    <div class="item_menu" v-show="menuOpen" >
+        <button
+          class="ui_button_small text_item_icon"
+          @click="changeType()"
+          v-if="item.value.type == 'text'"
+        >
+            <i class="ph-bold ph-link"></i> Add URL
+        </button>
+        <button
+          class="ui_button_small text_item_icon"
+          @click="changeType()"
+          v-if="item.value.type == 'url'"
+        >
+            <i class="ph-bold ph-link"></i> Remove URL
+        </button>
+        <button class="ui_button_small text_item_icon" @click="openIconSelector(item)">
+            <i class="ph-bold !!icon!! "></i> Change icon
+        </button>
+        <button class="ui_button_small text_item_delete" @click="store.deleteItem(item.id)">
+            <i class="ph-bold ph-trash"></i> Delete item
+        </button>
+    </div>
+</div>
+`,
+};
diff --git a/cardie/static/beta/layout.js b/cardie/static/beta/layout.js
@@ -0,0 +1,37 @@
+import { store } from "./store.js";
+
+export default {
+  data() {
+    return { store };
+  },
+
+  template: `<div class="editor_main_setting" id="editor_main_settings_layout">
+    <p class="ui_text_subheader_left">
+      <i class="ph-bold ph-layout"></i> Layout
+    </p>
+    <div class="ui_separator_horizontal"></div>
+    <div id="editor_main_settings_layout_buttons">
+      <button
+        @click="store.changeLayout('left')"
+        class="ui_button_icon"
+        data-tippy-content="Left align"
+      >
+        <i class="ph-bold ph-align-left"></i>
+      </button>
+      <button
+        @click="store.changeLayout('center')"
+        class="ui_button_icon"
+        data-tippy-content="Center align"
+      >
+        <i class="ph-bold ph-align-center-horizontal"></i>
+      </button>
+      <button
+        @click="store.changeLayout('right')"
+        class="ui_button_icon"
+        data-tippy-content="Right align"
+      >
+        <i class="ph-bold ph-align-right"></i>
+      </button>
+    </div>
+  </div>`,
+}