Merged in bugfix/ui_card_column (pull request #323)

Bugfix/ui card column

scm-ui-components/packages/ui-components/src/CardColumn.js

@@ -21,21 +21,22 @@ const styles = {
   flexFullHeight: {
     display: "flex",
     flexDirection: "column",
+    justifyContent: "space-around",
     alignSelf: "stretch"
   },
-  content: {
-    display: "flex",
-    flexGrow: 1,
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
   footer: {
     display: "flex",
-    marginTop: "auto",
-    paddingBottom: "1.5rem"
+    paddingBottom: "1rem",
   },
-  noBottomMargin: {
-    marginBottom: "0 !important"
+  topPart: {
+    display: "flex"
+  },
+  contentRight: {
+    marginLeft: "auto"
+  },
+  contentLeft: {
+    marginBottom: "0 !important",
+    overflow: "hidden"
   }
 };
 
@@ -91,25 +92,26 @@ class CardColumn extends React.Component<Props> {
               classes.flexFullHeight
             )}
           >
-            <div className={classes.content}>
+            <div className={classes.topPart}>
               <div
                 className={classNames(
                   "content",
-                  "shorten-text",
-                  classes.noBottomMargin
+                  classes.contentLeft
                 )}
               >
-                <p className="is-marginless">
+                <p className="shorten-text is-marginless">
                   <strong>{title}</strong>
                 </p>
                 <p className="shorten-text">{description}</p>
               </div>
+              <div className={classes.contentRight}>
               {contentRight && contentRight}
+              </div>
             </div>
-            <div className={classNames("level", classes.footer)}>
-              <div className="level-left is-hidden-mobile">{footerLeft}</div>
-              <div className="level-right is-mobile">{footerRight}</div>
-            </div>
+              <div className={classNames("level", classes.footer)}>
+                <div className="level-left is-hidden-mobile">{footerLeft}</div>
+                <div className="level-right is-mobile is-marginless">{footerRight}</div>
+              </div>
           </div>
         </article>
       </>

scm-ui/public/locales/es/admin.json

@@ -29,22 +29,36 @@
       "installedNavLink": "Instalados",
       "availableNavLink": "Disponibles"
     },
-    "installPending": "Instalar los complementos pendientes",
+    "executePending": "Ejecutar los complementos pendientes",
     "noPlugins": "No se han encontrado complementos.",
     "modal": {
-      "title": "Instalar complemento {{name}} ",
+      "title": {
+        "install": "Instalar complemento {{name}}",
+        "update": "Actualizar complemento {{name}}",
+        "uninstall": "Desinstalar complemento {{name}}"
+      },
       "restart": "Reiniciar para activar",
       "install": "Instalar",
+      "update": "Actualizar",
+      "uninstall": "Desinstalar",
+      "installQueue": "Será instalado:",
+      "updateQueue": "Será actualizado:",
+      "uninstallQueue": "Será desinstalado:",
       "installAndRestart": "Instalar y reiniciar",
+      "updateAndRestart": "Actualizar y reiniciar",
+      "uninstallAndRestart": "Desinstalar y reiniciar",
+      "executeAndRestart": "Ejecutar y reiniciar",
       "abort": "Cancelar",
       "author": "Autor",
       "version": "Versión",
+      "currentVersion": "Versión instalada",
+      "newVersion": "Nueva versión",
       "dependencyNotification": "Con este complemento las siguientes dependencias serán instaladas si no lo han sido ya",
       "dependencies": "Dependencias",
       "successNotification": "Complemento instalado correctamente. Necesita recargar la página para ver los cambios:",
       "reload": "recargar ahora",
       "restartNotification": "Usted debería reiniciar scm-manager sólo si actualmente no hay nadie trabajando con el.",
-      "installPending": "Los siguientes complementos serán instalados y después de la instalación sdm-manager será reiniciado."
+      "executePending": "Se ejecutarán los siguientes cambios en el complemento y luego se reiniciará el contexto scm-manager."
     }
   },
   "repositoryRole": {

scm-ui/src/admin/plugins/components/PluginEntry.js

@@ -1,8 +1,9 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
+import { translate } from "react-i18next";
 import type { Plugin } from "@scm-manager/ui-types";
-import { CardColumn } from "@scm-manager/ui-components";
+import { CardColumn, Icon } from "@scm-manager/ui-components";
 import PluginAvatar from "./PluginAvatar";
 import classNames from "classnames";
 import PluginModal from "./PluginModal";
@@ -18,7 +19,8 @@ type Props = {
   refresh: () => void,
 
   // context props
-  classes: any
+  classes: any,
+  t: string => string
 };
 
 type State = {
@@ -31,21 +33,12 @@ const styles = {
   link: {
     cursor: "pointer",
     pointerEvents: "all",
+    marginBottom: "0 !important",
     padding: "0.5rem",
-    border: "solid 1px var(--dark-25)",
+    border: "solid 1px #cdcdcd", // $dark-25
     borderRadius: "4px",
     "&:hover": {
-      borderColor: "var(--dark-50)"
-    }
-  },
-  topRight: {
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  layout: {
-    "& .level": {
-      paddingBottom: "0.5rem"
+      borderColor: "#9a9a9a" // $dark-50
     }
   },
   actionbar: {
@@ -98,15 +91,15 @@ class PluginEntry extends React.Component<Props, State> {
   };
 
   createActionbar = () => {
-    const { classes } = this.props;
+    const { classes, t } = this.props;
     return (
-      <div className={classNames(classes.actionbar, classes.topRight)}>
+      <div className={classes.actionbar}>
         {this.isInstallable() && (
           <span
             className={classNames(classes.link, "level-item")}
             onClick={() => this.toggleModal("showInstallModal")}
           >
-            <i className="fas fa-download has-text-info" />
+            <Icon title={t("plugins.modal.install")} name="download" color="info" />
           </span>
         )}
         {this.isUninstallable() && (
@@ -114,7 +107,7 @@ class PluginEntry extends React.Component<Props, State> {
             className={classNames(classes.link, "level-item")}
             onClick={() => this.toggleModal("showUninstallModal")}
           >
-            <i className="fas fa-trash has-text-info" />
+            <Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
           </span>
         )}
         {this.isUpdatable() && (
@@ -122,7 +115,7 @@ class PluginEntry extends React.Component<Props, State> {
             className={classNames(classes.link, "level-item")}
             onClick={() => this.toggleModal("showUpdateModal")}
           >
-            <i className="fas fa-sync-alt has-text-info" />
+            <Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
           </span>
         )}
       </div>
@@ -178,7 +171,7 @@ class PluginEntry extends React.Component<Props, State> {
   };
 
   render() {
-    const { plugin, classes } = this.props;
+    const { plugin } = this.props;
     const avatar = this.createAvatar(plugin);
     const actionbar = this.createActionbar();
     const footerRight = this.createFooterRight(plugin);
@@ -188,7 +181,6 @@ class PluginEntry extends React.Component<Props, State> {
     return (
       <>
         <CardColumn
-          className={classes.layout}
           action={
             this.isInstallable()
               ? () => this.toggleModal("showInstallModal")
@@ -210,4 +202,4 @@ class PluginEntry extends React.Component<Props, State> {
   }
 }
 
-export default injectSheet(styles)(PluginEntry);
+export default injectSheet(styles)(translate("admin")(PluginEntry));