diff --git a/scm-ui/public/images/iconCommunitySupport.png b/scm-ui/public/images/iconCommunitySupport.png new file mode 100644 index 0000000000..7a080903a0 Binary files /dev/null and b/scm-ui/public/images/iconCommunitySupport.png differ diff --git a/scm-ui/public/images/iconEnterpriseSupport.png b/scm-ui/public/images/iconEnterpriseSupport.png new file mode 100644 index 0000000000..0eadfaf85b Binary files /dev/null and b/scm-ui/public/images/iconEnterpriseSupport.png differ diff --git a/scm-ui/public/locales/de/admin.json b/scm-ui/public/locales/de/admin.json index dea74053e9..6d3371c1cd 100644 --- a/scm-ui/public/locales/de/admin.json +++ b/scm-ui/public/locales/de/admin.json @@ -7,7 +7,16 @@ "generalNavLink": "Generell" }, "information": { - "currentAppVersion": "Aktuelle Software-Versionsnummer" + "currentAppVersion": "Aktuelle Software-Versionsnummer", + "communityTitle": "Community Support", + "communityIconAlt": "Community Support Icon", + "communityInfo": "Das Cloudogu Support-Team steht für allgemeine Fragen rund um SCM-Manager, die Meldung von Fehlern sowie Anfragen von Features gerne für Sie über unsere offiziellen Kanäle bereit.", + "communityButton": "Unser Team kontaktieren", + "enterpriseTitle": "Enterprise Support", + "enterpriseIconAlt": "Enterprise Support Icon", + "enterpriseInfo": "Sie benötigen technische Unterstützung für Ihr Unternehmen oder haben Bedarf an einem für Sie entwickelten SCM-Manager Plugin? Gerne helfen wir Ihnen bei Ihren individuellen Anforderungen für die SCM-Manager Nutzung weiter.
Kontaktieren Sie das SCM-Manager Support Team bei unserem Entwicklungs-Partner Cloudogu für ein unverbindliches Angebot.", + "enterpriseLink": "https://cloudogu.com/de/scm-manager-enterprise/", + "enterpriseButton": "Enterprise Support anfragen" } }, "plugins": { diff --git a/scm-ui/public/locales/en/admin.json b/scm-ui/public/locales/en/admin.json index a5697ea4fe..86b3e788e0 100644 --- a/scm-ui/public/locales/en/admin.json +++ b/scm-ui/public/locales/en/admin.json @@ -6,8 +6,17 @@ "settingsNavLink": "Settings", "generalNavLink": "General" }, - "information": { - "currentAppVersion": "Current Application Version" + "info": { + "currentAppVersion": "Current Application Version", + "communityTitle": "Community Support", + "communityIconAlt": "Community Support Icon", + "communityInfo": "The Cloudogu support team is available for general questions about SCM-Manager, bug reporting and feature requests through our official channels.", + "communityButton": "Contact our team", + "enterpriseTitle": "Enterprise Support", + "enterpriseIconAlt": "Enterprise Support Icon", + "enterpriseInfo": "You need technical support for your company or you need a SCM-Manager plugin developed for you? We are happy to help you with your individual requirements for SCM-Manager use.
Contact the SCM-Manager Support Team at our development partner Cloudogu for a non-binding offer.", + "enterpriseLink": "https://cloudogu.com/en/scm-manager-enterprise/", + "enterpriseButton": "Request Enterprise Support" } }, "plugins": { diff --git a/scm-ui/src/admin/containers/AdminDetails.js b/scm-ui/src/admin/containers/AdminDetails.js index a7a135aa97..4b98a891e5 100644 --- a/scm-ui/src/admin/containers/AdminDetails.js +++ b/scm-ui/src/admin/containers/AdminDetails.js @@ -1,8 +1,15 @@ // @flow import React from "react"; import { connect } from "react-redux"; +import injectSheet from "react-jss"; import { translate } from "react-i18next"; -import { Loading, Title, Subtitle } from "@scm-manager/ui-components"; +import classNames from "classnames"; +import { + Loading, + Title, + Subtitle, + Image +} from "@scm-manager/ui-components"; import { getAppVersion } from "../../modules/indexResource"; type Props = { @@ -11,13 +18,23 @@ type Props = { version: string, - // context objects + // context props + classes: any, t: string => string }; +const styles = { + boxShadow: { + boxShadow: "0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 1px rgb(40, 177, 232)" + }, + boxTitle: { + fontWeight: "500 !important" + } +}; + class AdminDetails extends React.Component { render() { - const { t, loading } = this.props; + const { loading, classes, t } = this.props; if (loading) { return ; @@ -25,8 +42,46 @@ class AdminDetails extends React.Component { return ( <> - + <Title title={t("admin.info.currentAppVersion")} /> <Subtitle subtitle={this.props.version} /> + <div className={classNames("box", classes.boxShadow)}> + <article className="media"> + <div className="media-left"> + <figure className="image is-64x64"> + <Image + src="/images/iconCommunitySupport.png" + alt={t("admin.info.communityIconAlt")} + /> + </figure> + </div> + <div className="media-content"> + <div className="content"> + <h3 className={classes.boxTitle}>{t("admin.info.communityTitle")}</h3> + <p>{t("admin.info.communityInfo")}</p> + <a className="button is-info is-pulled-right" href="https://scm-manager.org/support/">{t("admin.info.communityButton")}</a> + </div> + </div> + </article> + </div> + <div className={classNames("box", classes.boxShadow)}> + <article className="media"> + <div className="media-left"> + <figure className="image is-64x64"> + <Image + src="/images/iconEnterpriseSupport.png" + alt={t("admin.info.enterpriseIconAlt")} + /> + </figure> + </div> + <div className="media-content"> + <div className="content"> + <h3 className={classes.boxTitle}>{t("admin.info.enterpriseTitle")}</h3> + <p>{t("admin.info.enterpriseInfo")}</p> + <a className="button is-info is-pulled-right" href={t("admin.info.enterpriseLink")}>{t("admin.info.enterpriseButton")}</a> + </div> + </div> + </article> + </div> </> ); } @@ -39,4 +94,4 @@ const mapStateToProps = (state: any) => { }; }; -export default connect(mapStateToProps)(translate("admin")(AdminDetails)); +export default connect(mapStateToProps)(injectSheet(styles)(translate("admin")(AdminDetails)));