corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

Default Embed Colour control & abstracted colour inputs

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-07-23 15:32:57 +01:00
parent 31dec273d6
commit acb407b4b5
9 changed files with 134 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/api/serializers.py
View File

@ -172,7 +172,7 @@ class SavedGuildSerializer(DynamicModelSerializer):
class Meta:
model = SavedGuilds
fields = ("id", "guild_id", "name", "icon", "added_by", "permissions", "owner")
fields = ("id", "guild_id", "name", "icon", "added_by", "permissions", "default_embed_colour", "owner")
class TrackedContentSerializer_GET(DynamicModelSerializer):

18
apps/home/migrations/0019_savedguilds_default_embed_colour.py Normal file
View File

@ -0,0 +1,18 @@
# Generated by Django 5.0.4 on 2024-07-23 14:28
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('home', '0018_subchannel_channel_name'),
]
operations = [
migrations.AddField(
model_name='savedguilds',
name='default_embed_colour',
field=models.CharField(blank=True, default='3498db', max_length=6),
),
]

6
apps/home/models.py
View File

@ -56,6 +56,12 @@ class SavedGuilds(models.Model):
help_text=_("Does the 'added by' user own this guild?")
)
default_embed_colour = models.CharField(
max_length=6,
default="3498db",
blank=True
)
class Meta:
"""
Metadata for the SavedGuilds Model.

4
apps/static/css/home/index.css
View File

@ -70,3 +70,7 @@ td {
height: 100%;
}
}
#serverTabs .nav-link {
border-radius: 0;
}

71
apps/static/js/home/index.js
View File

@ -11,11 +11,11 @@ $(document).ready(async function() {
handleDiscordChannelNames();
});
$('#serverTabs [data-bs-toggle="tab"]').on("show.bs.tab", function(event) {
const activeTab = $(event.target);
$(".tab-pane-buttons .tab-pane-buttons-item").hide();
$(`.tab-pane-buttons .tab-pane-buttons-item[data-tab="${activeTab.attr("id")}"]`).show();
});
// $('#serverTabs [data-bs-toggle="tab"]').on("show.bs.tab", function(event) {
// const activeTab = $(event.target);
// $(".tab-pane-buttons .tab-pane-buttons-item").hide();
// $(`.tab-pane-buttons .tab-pane-buttons-item[data-tab="${activeTab.attr("id")}"]`).show();
// });
$(document).on("selectedServerChange", function() {
$("#subscriptionsTab").click();
@ -63,4 +63,63 @@ function genHexString(len) {
output += (Math.floor(Math.random() * 16)).toString(16);
}
return output;
}
}
// #region Colour Controls
$(".colour-control-picker").on("change", function() {
$(this).closest(".colour-control-group").find(".colour-control-text").val($(this).val());
});
$(".colour-control-text").on("change", function() {
$(this).closest(".colour-control-group").find(".colour-control-picker").val($(this).val());
});
function updateColourInput(id, hexString) {
hexString = hexString.toUpperCase();
$(`#${id} .colour-picker`).val(hexString);
$(`#${id} .colour-text`).val(hexString);
}
$(document).ready(function() {
$(".colour-input").each(function() {
let id = $(this).attr("data-id")
label = $(this).attr("data-label");
helpText = $(this).attr("data-helptext");
defaultColour = $(this).attr("data-defaultcolour");
defaultColour = defaultColour ? defaultColour : "#3498db"
$(this).replaceWith(`
<label for="${id}Picker" class="form-label">${label}</label>
<div id="${id}" class="input-group">
<input type="color" name="${id}Picker" id="${id}Picker" class="form-control-color input-group-text colour-picker">
<input type="text" name="${id}Text" id="${id}Text" class="form-control colour-text">
<button type="button" class="btn btn-secondary colour-reset" data-bs-toggle="tooltip" data-bs-title="Reset Colour" data-defaultcolour="${defaultColour}">
<i class="bi bi-arrow-clockwise"></i>
</button>
<button type="button" class="btn btn-secondary colour-random" data-bs-toggle="tooltip" data-bs-title="Random Colour">
<i class="bi bi-dice-5"></i>
</button>
</div>
<div class="form-text">${helpText}</div>
`);
$(`#${id} .colour-picker`).on("change", function() {
updateColourInput(id, $(this).val());
});
$(`#${id} .colour-text`).on("change", function() {
updateColourInput(id, $(this).val());
});
$(`#${id} .colour-reset`).on("click", function() {
updateColourInput(id, $(this).attr("data-defaultcolour"));
});
$(`#${id} .colour-random`).on("click", function() {
updateColourInput(id, "#" + genHexString(6));
});
updateColourInput(id, defaultColour)
$(`#${id} [data-bs-toggle="tooltip"]`).tooltip();
});
});

37
apps/static/js/home/subscriptions.js
View File

@ -200,7 +200,7 @@ async function showEditSubModal(subId) {
$("#subDescMutators").val("").change();
$("#subActive").prop("checked", true);
$("#subResetEmbedColour").click();
$("#subEmbedColour .colour-reset").click();
$("#subArticleFetchImage").prop("checked", true);
$("#subPubThreshold").val(getCurrentDateTime());
@ -231,7 +231,7 @@ async function showEditSubModal(subId) {
$("#subFilters").val("").change();
$("#subFilters").val(subscription.filters).change();
subSetHexColour(`#${subscription.embed_colour}`);
updateColourInput("subEmbedColour", `#${subscription.embed_colour}`);
$("#subArticleFetchImage").prop("checked", subscription.article_fetch_image);
$("#subPubThreshold").val(subscription.published_threshold.split('+')[0]);
@ -255,7 +255,7 @@ $("#subForm").on("submit", async function(event) {
title: $("#subTitleMutators option:selected").toArray().map(mutator => parseInt(mutator.value)),
desc: $("#subDescMutators option:selected").toArray().map(mutator => parseInt(mutator.value))
}
subEmbedColour = $("#subEmbedColour").val().split("#")[1];
subEmbedColour = $("#subEmbedColour .colour-text").val().split("#")[1];
articleFetchImage = $("#subArticleFetchImage").prop("checked")
publishedThreshold = $("#subPubThreshold").val();
active = $("#subActive").prop("checked");
@ -382,6 +382,9 @@ $(document).on("selectedServerChange", async function() {
updateBotInviteLink();
const activeServer = getCurrentlyActiveServer();
$("#subEmbedColour .colour-reset").attr("data-defaultcolour", "#" + activeServer.default_embed_colour);
await loadSubscriptions(activeServer.guild_id);
await loadChannelOptions(activeServer.guild_id);
await loadFilterOptions(activeServer.guild_id);
@ -622,31 +625,3 @@ function updateBotInviteLink() {
$("#invitePyrssToServerBtn").attr("href", inviteUrl);
}
// #region Colour Controls
$("#subEmbedColour").on("change", function() {
$("#subEmbedColourText").val($(this).val());
});
$("#subEmbedColourText").on("change", function() {
$("#subEmbedColour").val($(this).val());
});
function subSetHexColour(hexString) {
hexString = hexString.toUpperCase();
$("#subEmbedColour").val(hexString);
$("#subEmbedColourText").val(hexString);
}
$(document).ready(async () => {$("#subResetEmbedColour").click() });
// let options = await getSubscriptionOptions();
// console.log(JSON.stringify(options.actions.GET.creation_datetime));
$("#subResetEmbedColour").on("click", function() {
subSetHexColour("#3498db");
});
$("#subRandomEmbedColour").on("click", function() {
subSetHexColour(`#${genHexString(6)}`);
});
// #endregion

12
apps/templates/home/includes/settingstab.html Normal file
View File

@ -0,0 +1,12 @@
<form id="serverSettingsForm" novalidate>
<div class="row px-3">
<div class="col-lg-4">
<div class="colour-input"
data-id="defaultEmbedColour"
data-label="Default Embed Colour"
data-helptext="Default colour of each embed in Discord."
data-defaultcolour="#3498db">
</div>
</div>
</div>
</form>

15
apps/templates/home/includes/submodal.html
View File

@ -118,18 +118,11 @@
</div>
<div class="col-lg-6 pe-lg-4">
<div class="mb-4">
<label for="subEmbedColour" class="form-label">Embed Colour</label>
<div class="input-group">
<input type="color" name="subEmbedColour" id="subEmbedColour" class="form-control-color input-group-text">
<input type="text" name="subEmbedColourText" id="subEmbedColourText" class="form-control">
<button type="button" id="subResetEmbedColour" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Reset Colour">
<i class="bi bi-arrow-clockwise"></i>
</button>
<button type="button" id="subRandomEmbedColour" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Random Colour">
<i class="bi bi-dice-5"></i>
</button>
<div class="colour-input"
data-id="subEmbedColour"
data-label="Embed Colour"
data-helptext="Colour of each embed in Discord.">
</div>
<div class="form-text">Colour of each embed in Discord.</div>
</div>
</div>
<div class="col-lg-6 ps-lg-4">

41
apps/templates/home/index.html
View File

@ -56,34 +56,29 @@
</div>
</div>
<div class="col-12">
<div class="d-flex px-3 pt-4 pb-2">
<ul id="serverTabs" class="nav nav-pills me-auto" role="tablist">
<li class="nav-item" role="presentation">
<button id="subscriptionsTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">Subscriptions</button>
</li>
<li class="nav-item" role="presentation">
<button id="filtersTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">Content Filters</button>
</li>
<li class="nav-item" role="presentation">
<button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">Tracked Content</button>
</li>
</ul>
<div class="tab-pane-buttons">
<div class="tab-pane-buttons-item" data-tab="subscriptionsTab">
</div>
<div class="tab-pane-buttons-item" data-tab="filtersTab">
</div>
<div class="tab-pane-buttons-item" data-tab="contentTab">
</div>
</div>
</div>
<div class="col-12 border-bottom">
<ul id="serverTabs" class="nav nav-pills px-3" role="tablist">
<li class="nav-item" role="presentation">
<button id="subscriptionsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">Subscriptions</button>
</li>
<li class="nav-item" role="presentation">
<button id="filtersTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">Content Filters</button>
</li>
<li class="nav-item" role="presentation">
<button id="contentTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">Tracked Content</button>
</li>
<li class="nav-item ms-auto" role="presentation">
<button id="settingsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#settingsTabPane" type="button" aria-controls="settingsTabPane" aria-selected="false">Settings</button>
</li>
</ul>
</div>
<div class="col-12">
<div id="serverTabContent" class="tab-content">
<div id="serverTabContent" class="tab-content mt-4">
<div id="subscriptionsTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="subscriptionsTab" tabindex="0"></div>
<div id="filtersTabPane" class="tab-pane fade includes-table includes-table-controls includes-table-search" role="tabpanel" aria-labelledby="filtersTab" tabindex="0"> </div>
<div id="contentTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="contentTab" tabindex="0"></div>
<div id="settingsTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="settingsTab" tabindex=0>{% include "home/includes/settingstab.html" %}</div>
</div>
</div>
</div>