DEV: Initial UI for admin config area for /about (#27340)
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
GitHub
parent
891fb17f60
commit
ffec8163b0
|
|
@ -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>
|
||||
}
|
||||
|
|
@ -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>
|
||||
}
|
||||
|
|
@ -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>
|
||||
}
|
||||
|
|
@ -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>
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue