Move Button to right side (and remove doubled note)

2025-11-09 15:05:44 +01:00 · 2019-11-20 16:14:50 +01:00
parent d962265d8d
commit a04e05bf9b
27 changed files with 69 additions and 104 deletions
--- a/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEvent } from "react";
-
-import { AddButton } from "../buttons";
 import InputField from "./InputField";
+import Level from "../layout/Level";
+import { AddButton } from "../buttons";

 type Props = {
  addEntry: (p: string) => void;
@@ -48,10 +48,14 @@ class AddEntryToTableField extends React.Component<Props, State> {
          disabled={disabled}
          helpText={helpText}
        />
-        <AddButton
-          label={buttonLabel}
-          action={this.addButtonClicked}
-          disabled={disabled || this.state.entryToAdd === "" || !this.isValid()}
+        <Level
+          right={
+            <AddButton
+              label={buttonLabel}
+              action={this.addButtonClicked}
+              disabled={disabled || this.state.entryToAdd === "" || !this.isValid()}
+            />
+          }
        />
      </>
    );
--- a/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEvent } from "react";
-
-import { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
+import { SelectValue } from "@scm-manager/ui-types";
 import Autocomplete from "../Autocomplete";
+import Level from "../layout/Level";
 import AddButton from "../buttons/AddButton";

 type Props = {
@@ -53,8 +53,7 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
          noOptionsMessage={noOptionsMessage}
          creatable={true}
        />
-
-        <AddButton label={buttonLabel} action={this.addButtonClicked} disabled={disabled} />
+        <Level right={<AddButton label={buttonLabel} action={this.addButtonClicked} disabled={disabled} />} />
      </div>
    );
  }
--- a/scm-ui/ui-webapp/public/locales/de/admin.json
+++ b/scm-ui/ui-webapp/public/locales/de/admin.json
@@ -6,7 +6,7 @@
      "settingsNavLink": "Einstellungen",
      "generalNavLink": "Generell"
    },
-    "info":  {
+    "info": {
      "currentAppVersion": "Aktuelle Software-Versionsnummer",
      "communityTitle": "Community Support",
      "communityIconAlt": "Community Support Icon",
@@ -91,8 +91,7 @@
      "submit": "Speichern"
    },
    "delete": {
-      "button": "Löschen",
-      "subtitle": "Berechtigungsrolle löschen",
+      "button": "Berechtigungsrolle löschen",
      "confirmAlert": {
        "title": "Berechtigungsrolle löschen?",
        "message": "Wollen Sie diese Rolle wirklich löschen? Alle Benutzer mit dieser Rolle verlieren die entsprechenden Berechtigungen.",
--- a/scm-ui/ui-webapp/public/locales/de/groups.json
+++ b/scm-ui/ui-webapp/public/locales/de/groups.json
@@ -60,8 +60,7 @@
    }
  },
  "deleteGroup": {
-    "subtitle": "Gruppe löschen",
-    "button": "Löschen",
+    "button": "Gruppe löschen",
    "confirmAlert": {
      "title": "Gruppe löschen",
      "message": "Soll die Gruppe wirklich gelöscht werden?",
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -114,7 +114,7 @@
      "size": "Größe"
    },
    "noSources": "Keine Sources in diesem Branch gefunden.",
-    "extension" : {
+    "extension": {
      "notBound": "Keine Erweiterung angebunden."
    }
  },
@@ -166,8 +166,7 @@
    }
  },
  "deleteRepo": {
-    "subtitle": "Repository löschen",
-    "button": "Löschen",
+    "button": "Repository löschen",
    "confirmAlert": {
      "title": "Repository löschen",
      "message": "Soll das Repository wirklich gelöscht werden?",
--- a/scm-ui/ui-webapp/public/locales/de/users.json
+++ b/scm-ui/ui-webapp/public/locales/de/users.json
@@ -45,8 +45,7 @@
    "subtitle": "Erstellen eines neuen Benutzers"
  },
  "deleteUser": {
-    "subtitle": "Benutzer löschen",
-    "button": "Löschen",
+    "button": "Benutzer löschen",
    "confirmAlert": {
      "title": "Benutzer löschen",
      "message": "Soll der Benutzer wirklich gelöscht werden?",
--- a/scm-ui/ui-webapp/public/locales/en/admin.json
+++ b/scm-ui/ui-webapp/public/locales/en/admin.json
@@ -11,7 +11,7 @@
      "communityTitle": "Community Support",
      "communityIconAlt": "Community Support Icon",
      "communityInfo": "Contact the SCM-Manager support team for questions about SCM-Manager, to report bugs or to request features through the official channels.",
-      "communityButton": "Contact our team",
+      "communityButton": "Contact our Team",
      "enterpriseTitle": "Enterprise Support",
      "enterpriseIconAlt": "Enterprise Support Icon",
      "enterpriseInfo": "You require support with the integration of SCM-Manager into your processes, with the customization of the tool or simply a service level agreement (SLA)?",
@@ -76,8 +76,8 @@
    "createSubtitle": "Create Permission Role",
    "editSubtitle": "Edit Permission Role",
    "overview": {
-      "title": "Overview of all permission roles",
-      "noPermissionRoles": "No permission roles found.",
+      "title": "Overview of all Permission Roles",
+      "noPermissionRoles": "No Permission Roles found.",
      "createButton": "Create Permission Role"
    },
    "editButton": "Edit",
@@ -91,10 +91,9 @@
      "submit": "Save"
    },
    "delete": {
-      "button": "Delete",
-      "subtitle": "Delete permission role",
+      "button": "Delete Permission Role",
      "confirmAlert": {
-        "title": "Delete permission role",
+        "title": "Delete Permission Role",
        "message": "Do you really want to delete this permission role? All users will lose their corresponding permissions.",
        "submit": "Yes",
        "cancel": "No"
--- a/scm-ui/ui-webapp/public/locales/en/groups.json
+++ b/scm-ui/ui-webapp/public/locales/en/groups.json
@@ -60,8 +60,7 @@
    }
  },
  "deleteGroup": {
-    "subtitle": "Delete Group",
-    "button": "Delete",
+    "button": "Delete Group",
    "confirmAlert": {
      "title": "Delete Group",
      "message": "Do you really want to delete the group?",
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -114,7 +114,7 @@
      "size": "Size"
    },
    "noSources": "No sources found for this branch.",
-    "extension" : {
+    "extension": {
      "notBound": "No extension bound."
    }
  },
@@ -166,8 +166,7 @@
    }
  },
  "deleteRepo": {
-    "subtitle": "Delete Repository",
-    "button": "Delete",
+    "button": "Delete Repository",
    "confirmAlert": {
      "title": "Delete repository",
      "message": "Do you really want to delete the repository?",
@@ -178,7 +177,7 @@
  "diff": {
    "changes": {
      "add": "added",
-      "delete":  "deleted",
+      "delete": "deleted",
      "modify": "modified",
      "rename": "renamed",
      "copy": "copied"
--- a/scm-ui/ui-webapp/public/locales/en/users.json
+++ b/scm-ui/ui-webapp/public/locales/en/users.json
@@ -45,17 +45,16 @@
    "subtitle": "Create a new user"
  },
  "deleteUser": {
-    "subtitle": "Delete User",
-    "button": "Delete",
+    "button": "Delete User",
    "confirmAlert": {
-      "title": "Delete user",
+      "title": "Delete User",
      "message": "Do you really want to delete the user?",
      "submit": "Yes",
      "cancel": "No"
    }
  },
  "singleUserPassword": {
-    "button": "Set password",
+    "button": "Set Password",
    "setPasswordSuccessful": "Password successfully set"
  },
  "userForm": {
--- a/scm-ui/ui-webapp/public/locales/es/admin.json
+++ b/scm-ui/ui-webapp/public/locales/es/admin.json
@@ -86,8 +86,7 @@
      "submit": "Guardar"
    },
    "delete": {
-      "button": "Borrar",
-      "subtitle": "Eliminar el rol",
+      "button": "Eliminar el rol",
      "confirmAlert": {
        "title": "Eliminar el rol",
        "message": "¿Realmente desea borrar el rol? Todos los usuarios de este rol perderń sus permisos.",
--- a/scm-ui/ui-webapp/public/locales/es/groups.json
+++ b/scm-ui/ui-webapp/public/locales/es/groups.json
@@ -60,8 +60,7 @@
    }
  },
  "deleteGroup": {
-    "subtitle": "Borrar grupo",
-    "button": "Borrar",
+    "button": "Borrar grupo",
    "confirmAlert": {
      "title": "Borrar grupo",
      "message": "¿Realmente desea borrar el grupo?",
--- a/scm-ui/ui-webapp/public/locales/es/repos.json
+++ b/scm-ui/ui-webapp/public/locales/es/repos.json
@@ -114,7 +114,7 @@
      "size": "tamaño"
    },
    "noSources": "No se han encontrado fuentes para esta rama.",
-    "extension" : {
+    "extension": {
      "notBound": "Sin extensión conectada."
    }
  },
@@ -166,8 +166,7 @@
    }
  },
  "deleteRepo": {
-    "subtitle": "Borrar repositorio",
-    "button": "Borrar",
+    "button": "Borrar repositorio",
    "confirmAlert": {
      "title": "Borrar repositorio",
      "message": "¿Realmente desea borrar el repositorio?",
@@ -178,7 +177,7 @@
  "diff": {
    "changes": {
      "add": "añadido",
-      "delete":  "borrado",
+      "delete": "borrado",
      "modify": "modificado",
      "rename": "renombrado",
      "copy": "copiado"
--- a/scm-ui/ui-webapp/public/locales/es/users.json
+++ b/scm-ui/ui-webapp/public/locales/es/users.json
@@ -45,8 +45,7 @@
    "subtitle": "Crear un nuevo usuario"
  },
  "deleteUser": {
-    "subtitle": "Borrar usuario",
-    "button": "Borrar",
+    "button": "Borrar usuario",
    "confirmAlert": {
      "title": "Borrar usuario",
      "message": "¿Realmente desea borrar el usuario?",
--- a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { RepositoryRole } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRole, getDeleteRoleFailure, isDeleteRolePending } from "../modules/roles";

 type Props = WithTranslation & {
@@ -64,13 +64,9 @@ class DeleteRepositoryRole extends React.Component<Props> {

    return (
      <>
-        <Subtitle subtitle={t("repositoryRole.delete.subtitle")} />
-        <div className="columns">
-          <div className="column">
-            <ErrorNotification error={error} />
-            <DeleteButton label={t("repositoryRole.delete.button")} action={action} loading={loading} />
-          </div>
-        </div>
+        <hr />
+        <ErrorNotification error={error} />
+        <Level right={<DeleteButton label={t("repositoryRole.delete.button")} action={action} loading={loading} />} />
      </>
    );
  }
--- a/scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx
@@ -44,7 +44,6 @@ class EditRepositoryRole extends React.Component<Props> {
      <>
        <Subtitle subtitle={t("repositoryRole.editSubtitle")} />
        <RepositoryRoleForm role={this.props.role} submitForm={role => this.updateRepositoryRole(role)} />
-        <hr />
        <DeleteRepositoryRole role={this.props.role} />
      </>
    );
--- a/scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx
+++ b/scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx
@@ -4,6 +4,7 @@ import {
  InputField,
  Notification,
  PasswordConfirmation,
+  Level,
  SubmitButton
 } from "@scm-manager/ui-components";
 import { WithTranslation, withTranslation } from "react-i18next";
@@ -124,11 +125,7 @@ class ChangeUserPassword extends React.Component<Props, State> {
          passwordChanged={this.passwordChanged}
          key={this.state.passwordChanged ? "changed" : "unchanged"}
        />
-        <div className="columns">
-          <div className="column">
-            <SubmitButton disabled={!this.isValid()} loading={loading} label={t("password.submit")} />
-          </div>
-        </div>
+        <Level right={<SubmitButton disabled={!this.isValid()} loading={loading} label={t("password.submit")} />} />
      </form>
    );
  }
--- a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
@@ -8,9 +8,9 @@ import {
  InputField,
  SubmitButton,
  Textarea,
+  Level,
  Checkbox
 } from "@scm-manager/ui-components";
-
 import * as validator from "./groupValidation";

 type Props = WithTranslation & {
@@ -154,7 +154,7 @@ class GroupForm extends React.Component<Props, State> {
          />
          {this.renderExternalField(group)}
          {this.renderMemberfields(group)}
-          <SubmitButton disabled={!this.isValid()} label={t("groupForm.submit")} loading={loading} />
+          <Level right={<SubmitButton disabled={!this.isValid()} label={t("groupForm.submit")} loading={loading} />} />
        </form>
      </>
    );
--- a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Group } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteGroup, getDeleteGroupFailure, isDeleteGroupPending } from "../modules/groups";

 type Props = WithTranslation & {
@@ -64,13 +64,9 @@ export class DeleteGroup extends React.Component<Props> {

    return (
      <>
-        <Subtitle subtitle={t("deleteGroup.subtitle")} />
+        <hr />
        <ErrorNotification error={error} />
-        <div className="columns">
-          <div className="column">
-            <DeleteButton label={t("deleteGroup.button")} action={action} loading={loading} />
-          </div>
-        </div>
+        <Level right={<DeleteButton label={t("deleteGroup.button")} action={action} loading={loading} />} />
      </>
    );
  }
--- a/scm-ui/ui-webapp/src/groups/containers/EditGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/EditGroup.tsx
@@ -61,7 +61,6 @@ class EditGroup extends React.Component<Props> {
          loading={loading}
          loadUserSuggestions={this.loadUserAutocompletion}
        />
-        <hr />
        <DeleteGroup group={group} />
      </div>
    );
--- a/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository, RepositoryType } from "@scm-manager/ui-types";
-import { Subtitle, InputField, Select, SubmitButton, Textarea } from "@scm-manager/ui-components";
+import { Subtitle, InputField, Select, Textarea, Level, SubmitButton } from "@scm-manager/ui-components";
 import * as validator from "./repositoryValidation";

 type Props = WithTranslation & {
@@ -54,7 +54,6 @@ class RepositoryForm extends React.Component<Props, State> {

  isFalsy(value) {
    return !value;
-
  }

  isValid = () => {
@@ -91,7 +90,7 @@ class RepositoryForm extends React.Component<Props, State> {
    const disabled = !this.isModifiable() && !this.isCreateMode();

    const submitButton = disabled ? null : (
-      <SubmitButton disabled={!this.isValid()} loading={loading} label={t("repositoryForm.submit")} />
+      <Level right={<SubmitButton disabled={!this.isValid()} loading={loading} label={t("repositoryForm.submit")} />} />
    );

    let subtitle = null;
--- a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Repository } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";

 type Props = WithTranslation & {
@@ -65,13 +65,8 @@ class DeleteRepo extends React.Component<Props> {
    return (
      <>
        <hr />
-        <Subtitle subtitle={t("deleteRepo.subtitle")} />
        <ErrorNotification error={error} />
-        <div className="columns">
-          <div className="column">
-            <DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />
-          </div>
-        </div>
+        <Level right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />} />
      </>
    );
  }
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx
@@ -6,6 +6,7 @@ import {
  GroupAutocomplete,
  LabelWithHelpIcon,
  Radio,
+  Level,
  SubmitButton,
  Subtitle,
  UserAutocomplete
@@ -141,8 +142,8 @@ class CreatePermissionForm extends React.Component<Props, State> {
            </div>
          </div>
          <div className="columns">
-            <div className="column is-three-fifths">{this.renderAutocompletionField()}</div>
-            <div className="column is-two-fifths">
+            <div className="column is-half">{this.renderAutocompletionField()}</div>
+            <div className="column is-half">
              <div className="columns">
                <div className="column is-narrow">
                  <RoleSelector
@@ -163,15 +164,15 @@ class CreatePermissionForm extends React.Component<Props, State> {
              </div>
            </div>
          </div>
-          <div className="columns">
-            <div className="column">
+          <Level
+            right={
              <SubmitButton
                label={t("permission.add-permission.submit-button")}
                loading={loading}
                disabled={!this.state.valid || this.state.name === ""}
              />
-            </div>
-          </div>
+            }
+          />
        </form>
      </>
    );
--- a/scm-ui/ui-webapp/src/users/components/SetUserPassword.tsx
+++ b/scm-ui/ui-webapp/src/users/components/SetUserPassword.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
-import { SubmitButton, Notification, ErrorNotification, PasswordConfirmation } from "@scm-manager/ui-components";
+import { Level, SubmitButton, Notification, ErrorNotification, PasswordConfirmation } from "@scm-manager/ui-components";
 import { setPassword } from "./setPassword";

 type Props = WithTranslation & {
@@ -98,15 +98,15 @@ class SetUserPassword extends React.Component<Props, State> {
          passwordChanged={this.passwordChanged}
          key={this.state.passwordChanged ? "changed" : "unchanged"}
        />
-        <div className="columns">
-          <div className="column">
+        <Level
+          right={
            <SubmitButton
              disabled={!this.state.passwordValid}
              loading={loading}
              label={t("singleUserPassword.button")}
            />
-          </div>
-        </div>
+          }
+        />
      </form>
    );
  }
--- a/scm-ui/ui-webapp/src/users/components/UserForm.tsx
+++ b/scm-ui/ui-webapp/src/users/components/UserForm.tsx
@@ -6,6 +6,7 @@ import {
  Checkbox,
  InputField,
  PasswordConfirmation,
+  Level,
  SubmitButton,
  validation as validator
 } from "@scm-manager/ui-components";
@@ -166,11 +167,7 @@ class UserForm extends React.Component<Props, State> {
              />
            </div>
          </div>
-          <div className="columns">
-            <div className="column">
-              <SubmitButton disabled={!this.isValid()} loading={loading} label={t("userForm.button")} />
-            </div>
-          </div>
+          <Level right={<SubmitButton disabled={!this.isValid()} loading={loading} label={t("userForm.button")} />} />
        </form>
      </>
    );
--- a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { User } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteUser, getDeleteUserFailure, isDeleteUserPending } from "../modules/users";

 type Props = WithTranslation & {
@@ -64,13 +64,9 @@ class DeleteUser extends React.Component<Props> {

    return (
      <>
-        <Subtitle subtitle={t("deleteUser.subtitle")} />
+        <hr />
        <ErrorNotification error={error} />
-        <div className="columns">
-          <div className="column">
-            <DeleteButton label={t("deleteUser.button")} action={action} loading={loading} />
-          </div>
-        </div>
+        <Level right={<DeleteButton label={t("deleteUser.button")} action={action} loading={loading} />} />
      </>
    );
  }
--- a/scm-ui/ui-webapp/src/users/containers/EditUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/EditUser.tsx
@@ -41,7 +41,6 @@ class EditUser extends React.Component<Props> {
      <div>
        <ErrorNotification error={error} />
        <UserForm submitForm={user => this.modifyUser(user)} user={user} loading={loading} />
-        <hr />
        <DeleteUser user={user} />
      </div>
    );