IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-21 16:38:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Initial UI for admin config area for /about (#27340)

Browse Source 
This commit introduces the initial UI for the admin config area for the /about page. The UI isn't wired and doesn't do anything yet, but we're going to iterate on it in future commits.

Internal topic: t/128544.
This commit is contained in:
Osama Sayegh 2024-06-06 16:07:08 +03:00 committed by GitHub
parent 891fb17f60
commit ffec8163b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 306 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs Normal file
View File

@ -0,0 +1,16 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import i18n from "discourse-common/helpers/i18n";
export default class AdminConfigAreaCard extends Component {
@tracked collapsed = false;
<template>
<section class="admin-config-area-card">
<h3 class="admin-config-area-card__title">{{i18n @heading}}</h3>
<div class="admin-config-area-card__content">
{{yield}}
</div>
</section>
</template>
}

83
app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/contact-information.gjs Normal file
View File

@ -0,0 +1,83 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import DButton from "discourse/components/d-button";
import i18n from "discourse-common/helpers/i18n";
import GroupChooser from "select-kit/components/group-chooser";
import UserChooser from "select-kit/components/user-chooser";
export default class AdminConfigAreasAboutContactInformation extends Component {
@action
save() {
this.args.saveCallback();
// eslint-disable-next-line no-console
console.log("contact information");
}
<template>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.community_owner"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.community_owner_help"}}
</p>
<input type="text" />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.contact_email"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.contact_email_help"}}
</p>
<input type="text" />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.contact_url"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.contact_url_help"}}
</p>
<input type="text" />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.site_contact_name"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.site_contact_name_help"}}
</p>
<UserChooser />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.site_contact_group"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.site_contact_group_help"}}
</p>
<GroupChooser />
</div>
<DButton
@label="admin.config_areas.about.update"
@action={{this.save}}
class="btn-primary"
/>
</template>
}

52
app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs Normal file
View File

@ -0,0 +1,52 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import DButton from "discourse/components/d-button";
import DEditor from "discourse/components/d-editor";
import UppyImageUploader from "discourse/components/uppy-image-uploader";
import i18n from "discourse-common/helpers/i18n";
export default class AdminConfigAreasAboutGeneralSettings extends Component {
@action
save() {
this.args.saveCallback();
// eslint-disable-next-line no-console
console.log("general settings");
}
<template>
<div class="control-group">
<label>{{i18n "admin.config_areas.about.community_name"}}</label>
<input type="text" />
</div>
<div class="control-group">
<label>{{i18n "admin.config_areas.about.community_summary"}}</label>
<input type="text" />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.community_description"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<DEditor />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.banner_image"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.banner_image_help"}}
</p>
<UppyImageUploader />
</div>
<DButton
@label="admin.config_areas.about.update"
@action={{this.save}}
class="btn-primary"
/>
</template>
}

60
app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/your-organization.gjs Normal file
View File

@ -0,0 +1,60 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import DButton from "discourse/components/d-button";
import i18n from "discourse-common/helpers/i18n";
export default class AdminConfigAreasAboutYourOrganization extends Component {
@action
save() {
this.args.saveCallback();
// eslint-disable-next-line no-console
console.log("your organization");
}
<template>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.company_name"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.company_name_help"}}
</p>
<p class="admin-config-area-card__warning-banner">
{{i18n "admin.config_areas.about.company_name_warning"}}
</p>
<input type="text" />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.governing_law"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.governing_law_help"}}
</p>
<input type="text" />
</div>
<div class="control-group">
<label>
<span>{{i18n "admin.config_areas.about.city_for_disputes"}}</span>
<span class="admin-config-area-card__label-optional">{{i18n
"admin.config_areas.about.optional"
}}</span>
</label>
<p class="admin-config-area-card__additional-help">
{{i18n "admin.config_areas.about.city_for_disputes_help"}}
</p>
<input type="text" />
</div>
<DButton
@label="admin.config_areas.about.update"
@action={{this.save}}
class="btn-primary"
/>
</template>
}

38
app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs
View File

@ -1,14 +1,44 @@
import Component from "@glimmer/component";
import i18n from "discourse-common/helpers/i18n";
import AdminConfigAreaCard from "admin/components/admin-config-area-card";
import AdminConfigAreasAboutContactInformation from "admin/components/admin-config-area-cards/about/contact-information";
import AdminConfigAreasAboutGeneralSettings from "admin/components/admin-config-area-cards/about/general-settings";
import AdminConfigAreasAboutYourOrganization from "admin/components/admin-config-area-cards/about/your-organization";
export default class AdminConfigAreasAbout extends Component {
cards = [1, 2, 3];
saveCallback() {
// eslint-disable-next-line no-console
console.log("save callback");
}
<template>
<div class="admin-config-area">
<h2>{{i18n "admin.config_areas.about.header"}}</h2>
<div class="admin-config-area__primary-content">
{{#each this.cards as |card|}}
<div>{{card}}</div>
{{/each}}
<AdminConfigAreaCard
@heading="admin.config_areas.about.general_settings"
@primaryActionLabel="admin.config_areas.about.update"
>
<AdminConfigAreasAboutGeneralSettings
@saveCallback={{this.saveCallback}}
/>
</AdminConfigAreaCard>
<AdminConfigAreaCard
@heading="admin.config_areas.about.contact_information"
@primaryActionLabel="admin.config_areas.about.update"
>
<AdminConfigAreasAboutContactInformation
@saveCallback={{this.saveCallback}}
/>
</AdminConfigAreaCard>
<AdminConfigAreaCard
@heading="admin.config_areas.about.your_organization"
@primaryActionLabel="admin.config_areas.about.update"
>
<AdminConfigAreasAboutYourOrganization
@saveCallback={{this.saveCallback}}
/>
</AdminConfigAreaCard>
</div>
</div>
</template>

29
app/assets/stylesheets/common/admin/admin_config_area.scss
View File

@ -1,12 +1,25 @@
.admin-config-area {
display: grid;
grid-template-columns: 2fr 1fr;
column-gap: 1em;
.admin-config-area-card {
padding: 20px;
border: 1px solid var(--primary-low);
border-radius: 2px;
background-color: var(--secondary);
margin-bottom: 1em;
&__primary-content {
background: red;
&__label-optional {
color: var(--primary-medium);
font-size: var(--font-down-1);
margin-left: 5px;
}
&__help-inset {
background: green;
&__additional-help {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
&__warning-banner {
color: var(--primary-high);
background-color: var(--danger-low);
font-size: var(--font-down-1);
padding: 10px 10px;
}
}

40
config/locales/client.en.yml
View File

@ -5425,6 +5425,46 @@ en:
spam: "Spam"
staff_action_logs: "Staff Action Logs"
config_areas:
about:
header: "About your site"
general_settings: "General settings"
community_name: "Community name"
community_summary: "Community summary"
community_description: "Community description"
banner_image: "Banner image"
banner_image_help: |
This will be used on your About page. Recommended size: 800x300px. Accepted types: JPG, PNG, and SVG up to 10MB.
contact_information: "Contact information"
community_owner: "Community owner"
community_owner_help: |
Name of key contact responsible for this site. Used for critical notifications, and also displayed on /about. Visible to anonymous users on public sites.
contact_email: "Contact email"
contact_email_help: |
Email address of key contact responsible for this site. Used for critical notifications, and also displayed on /about. Visible to anonymous users on public sites.
contact_url: "Contact URL"
contact_url_help: |
Contact URL for this site. When present, replaces contact email address on /about and visible to anonymous users on public sites.
site_contact_name: "Site contact name"
site_contact_name_help: |
A valid staff username to send all automated messages from. If left blank, the default System account will be used.
site_contact_group: "Site contact group"
site_contact_group_help: |
A valid name of a group that gets invited to all automatically sent private messages.
your_organization: "Your organization"
company_name: "Company name"
company_name_help: |
Name of your company or organization.
company_name_warning: |
If left blank, no boilerplate Terms of Service or Privacy Notice will be provided.
governing_law: "Governing law"
governing_law_help: |
Specify the jurisdiction that governs the legal aspects of the site, including Terms of Service and Privacy Notice. This is typically the country or state where the company operating the site is registered or conducts business.
city_for_disputes: "City for disputes"
city_for_disputes_help: |
Specify the city that will be used as the jurisdiction for resolving any disputes related to the use of this forum. This information is typically included in legal documents such as the forum's Terms of Service.
optional: "(optional)"
update: "Update"
plugins:
title: "Plugins"
installed: "Installed Plugins"