feat: adjust channel colors and the modal (closes #1397)

HangarMC · Jan 3, 2025 · 466c5da · 466c5da
1 parent 245de9c
commit 466c5da
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 49 deletions.
diff --git a/backend/src/main/java/io/papermc/hangar/model/common/Color.java b/backend/src/main/java/io/papermc/hangar/model/common/Color.java
@@ -8,22 +8,22 @@
 
 public enum Color {
 
-    PURPLE("#B400FF"),
-    VIOLET("#C87DFF"),
-    MAGENTA("#E100E1"),
-    BLUE("#0000FF"),
-    LIGHTBLUE("#B9F2FF"),
-    QUARTZ("#E7FEFF"),
-    AQUA("#0096FF"),
-    CYAN("#00E1E1"),
-    GREEN("#00DC00"),
-    DARKGREEN("#009600"),
-    CHARTREUSE("#7FFF00"),
-    AMBER("#FFC800"),
-    GOLD("#CFB53B"),
-    ORANGE("#FF8200"),
-    RED("#DC0000"),
-    SILVER("#C0C0C0"),
+    FUCHSIA("#d946ef"),
+    PURPLE("#a855f7"),
+    VIOLET("#8b5cf6"),
+    INDIGO("#6366f1"),
+    BLUE("#3b82f6"),
+    SKY("#0ea5e9"),
+    CYAN("#06b6d4"),
+    TEAL("#14b8a6"),
+    EMERALD("#34d399"),
+    GREEN("#22c55e"),
+    LIME("#84cc16"),
+    YELLOW("#eab308"),
+    AMBER("#f59e0b"),
+    ORANGE("#f97316"),
+    RED("#ef4444"),
+    STONE("#78716c"),
     GRAY("#A9A9A9"),
     TRANSPARENT("transparent");
 

diff --git a/backend/src/main/java/io/papermc/hangar/model/common/roles/GlobalRole.java b/backend/src/main/java/io/papermc/hangar/model/common/roles/GlobalRole.java
@@ -14,13 +14,13 @@ public enum GlobalRole implements Role<GlobalRoleTable> {
 
     HANGAR_ADMIN("Hangar_Admin", 1, Permission.All, "Hangar Admin", Color.RED, 10),
     HANGAR_DEV("Hangar_Dev", 2, Permission.IsStaff.add(Permission.SeeHidden).add(Permission.ViewStats).add(Permission.ViewLogs).add(Permission.ViewHealth), "Hangar Developer", Color.ORANGE, 30),
-    HANGAR_MOD("Hangar_Mod", 3, Permission.IsStaff.add(Permission.Reviewer).add(Permission.DeleteVersion).add(Permission.DeleteProject).add(Permission.RestoreVersion).add(Permission.RestoreProject), "Hangar Moderator", Color.AQUA, 40),
+    HANGAR_MOD("Hangar_Mod", 3, Permission.IsStaff.add(Permission.Reviewer).add(Permission.DeleteVersion).add(Permission.DeleteProject).add(Permission.RestoreVersion).add(Permission.RestoreProject), "Hangar Moderator", Color.TEAL, 40),
 
     PAPERMC_CORE("PaperMC_Core", 4, Permission.All, "PaperMC Core", Color.AMBER, 0),
     PAPERMC_STAFF("PaperMC_Staff", 5, Permission.IsStaff.add(Permission.ModNotesAndFlags).add(Permission.SeeHidden), "PaperMC Staff", Color.AMBER, 50),
     PAPERMC_CM("PaperMC_CM", 6, Permission.All.remove(Permission.ManualValueChanges), "Community Manager", Color.AMBER, 20),
 
-    DUMMY("Dummy", 42, Permission.ViewPublicInfo, "Dummy", Color.CHARTREUSE, 42),
+    DUMMY("Dummy", 42, Permission.ViewPublicInfo, "Dummy", Color.LIME, 42),
 
     ORGANIZATION("Organization", 100, OrganizationRole.ORGANIZATION_OWNER.getPermissions(), "Organization", Color.PURPLE);
 

diff --git a/backend/src/main/java/io/papermc/hangar/model/common/roles/OrganizationRole.java b/backend/src/main/java/io/papermc/hangar/model/common/roles/OrganizationRole.java
@@ -15,7 +15,7 @@ public enum OrganizationRole implements Role<OrganizationRoleTable> {
     ORGANIZATION_SUPPORT("Organization_Support", 20, Permission.PostAsOrganization.add(Permission.IsOrganizationMember), "Support", Color.AMBER, 60),
     ORGANIZATION_EDITOR("Organization_Editor", 21, ProjectRole.PROJECT_EDITOR.getPermissions().add(ORGANIZATION_SUPPORT.permissions), "Editor", Color.AMBER, 50),
     ORGANIZATION_DEVELOPER("Organization_Developer", 22, ProjectRole.PROJECT_DEVELOPER.getPermissions().add(ORGANIZATION_EDITOR.permissions), "Developer", Color.ORANGE, 40),
-    ORGANIZATION_MAINTAINER("Organization_Maintainer", 23, Permission.CreateProject.add(Permission.EditProjectSettings).add(ProjectRole.PROJECT_MAINTAINER.getPermissions()).add(ORGANIZATION_DEVELOPER.permissions), "Maintainer", Color.AQUA, 30),
+    ORGANIZATION_MAINTAINER("Organization_Maintainer", 23, Permission.CreateProject.add(Permission.EditProjectSettings).add(ProjectRole.PROJECT_MAINTAINER.getPermissions()).add(ORGANIZATION_DEVELOPER.permissions), "Maintainer", Color.TEAL, 30),
     ORGANIZATION_ADMIN("Organization_Admin", 24, Permission.IsOrganizationAdmin.add(ORGANIZATION_MAINTAINER.permissions).add(ProjectRole.PROJECT_ADMIN.getPermissions()), "Owner", Color.PURPLE, 20),
     ORGANIZATION_OWNER("Organization_Owner", 25, Permission.IsOrganizationOwner.add(ProjectRole.PROJECT_OWNER.getPermissions()).add(ORGANIZATION_ADMIN.permissions), "Owner", Color.PURPLE, 10, false);
 

diff --git a/backend/src/main/java/io/papermc/hangar/model/common/roles/ProjectRole.java b/backend/src/main/java/io/papermc/hangar/model/common/roles/ProjectRole.java
@@ -16,7 +16,7 @@ public enum ProjectRole implements Role<ProjectRoleTable> {
     PROJECT_SUPPORT("Project_Support", 30, Permission.IsProjectMember, "Support", Color.AMBER, 60),
     PROJECT_EDITOR("Project_Editor", 31, Permission.EditPage.add(PROJECT_SUPPORT.getPermissions()), "Editor", Color.AMBER, 50),
     PROJECT_DEVELOPER("Project_Developer", 32, PROJECT_EDITOR.getPermissions(), "Developer", Color.ORANGE, 40),
-    PROJECT_MAINTAINER("Project_Maintainer", 33, Permission.CreateVersion.add(Permission.EditVersion).add(Permission.DeleteVersion).add(Permission.EditTags).add(PROJECT_DEVELOPER.getPermissions()), "Maintainer", Color.AQUA, 30),
+    PROJECT_MAINTAINER("Project_Maintainer", 33, Permission.CreateVersion.add(Permission.EditVersion).add(Permission.DeleteVersion).add(Permission.EditTags).add(PROJECT_DEVELOPER.getPermissions()), "Maintainer", Color.TEAL, 30),
     PROJECT_ADMIN("Project_Admin", 34, Permission.IsProjectAdmin.add(Permission.EditApiKeys).add(PROJECT_MAINTAINER.getPermissions()), "Admin", Color.PURPLE, 20),
     PROJECT_OWNER("Project_Owner", 35, Permission.IsProjectOwner.add(PROJECT_ADMIN.getPermissions()), "Owner", Color.PURPLE, 10, false);
 

diff --git a/backend/src/main/java/io/papermc/hangar/model/internal/versions/PendingVersion.java b/backend/src/main/java/io/papermc/hangar/model/internal/versions/PendingVersion.java
@@ -60,7 +60,7 @@ public PendingVersion(final @Nullable String versionString, final Map<Platform,
         // Keep data from frontend
         this.channelName = "";
         this.channelDescription = "";
-        this.channelColor = Color.CYAN;
+        this.channelColor = Color.EMERALD;
         this.channelFlags = Set.of();
     }
 

diff --git a/frontend/src/components/modals/ChannelModal.vue b/frontend/src/components/modals/ChannelModal.vue
@@ -27,21 +27,6 @@ const name = ref<string>(props.channel ? props.channel.name : "");
 const description = ref<string>(props.channel?.description || "");
 const color = ref<string>(props.channel ? props.channel.color : "");
 const flags = ref<ChannelFlag[]>(props.channel ? props.channel.flags : []);
-const swatches = computed<string[][]>(() => {
-  const result: string[][] = [];
-  const backendColors = useBackendData.channelColors;
-  const columns = Math.floor(Math.sqrt(backendColors.length));
-  const rows = Math.ceil(Math.sqrt(backendColors.length));
-  for (let i = 0; i < rows; i++) {
-    result[i] = [];
-    for (let j = 0; j < columns; j++) {
-      if (backendColors[i * columns + j]) {
-        result[i][j] = backendColors[i * columns + j].hex;
-      }
-    }
-  }
-  return result;
-});
 
 const noChange = computed(() => {
   return (
@@ -105,19 +90,19 @@ reset();
           <InputText v-model.trim="description" :label="i18n.t('channel.modal.description')" name="description" :maxlength="50" counter />
         </div>
         <p class="text-lg font-bold mt-3 mb-1">{{ i18n.t("channel.modal.color") }}</p>
-        <div v-for="(arr, arrIndex) in swatches" :key="arrIndex" class="flex">
-          <div v-for="(c, n) in arr" :key="n" class="flex-grow-0 flex-shrink-1 pa-2 pr-1 mb-1">
-            <div
-              :style="`background-color: ${c}`"
-              class="w-27px h-25px cursor-pointer inline-flex justify-center items-center rounded-lg border-black border-1"
-              :data-value="c"
-              @click="color = c"
-            >
-              <IconMdiCheckboxMarkedCircle
-                class="ma-auto transition-all ease-in-out duration-100"
-                :class="color === c ? 'visible opacity-100' : 'invisible opacity-0'"
-              />
-            </div>
+        <div class="grid gap-10px mb-2" style="grid-template-columns: repeat(auto-fit, 30px)">
+          <div
+            v-for="clr in useBackendData.channelColors"
+            :key="clr.name"
+            :style="`background-color: ${clr.hex}`"
+            class="h-30px w-30px cursor-pointer inline-flex justify-center items-center rounded-lg border-black border-1"
+            :data-value="clr.hex"
+            @click="color = clr.hex"
+          >
+            <IconMdiCheckboxMarkedCircle
+              class="transition-all ease-in-out duration-100 w-full h-full"
+              :class="color === clr.hex ? 'visible opacity-100' : 'invisible opacity-0'"
+            />
           </div>
         </div>
         <InputText