Merge with upstream

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - SubRepository support ([#1357](https://github.com/scm-manager/scm-manager/pull/1357))
 
+### Fixed
+- Align actionbar item horizontal and enforce correct margin between them ([#1358](https://github.com/scm-manager/scm-manager/pull/1358))
+
 ## [2.6.1] - 2020-09-30
 ### Fixed
 - Not found error when using browse command in empty hg repository ([#1355](https://github.com/scm-manager/scm-manager/pull/1355))

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -48,9 +48,22 @@ const HomeIcon = styled(Icon)`
   line-height: 1.5rem;
 `;
 
-const ActionWrapper = styled.div`
+const ActionBar = styled.div`
   align-self: center;
-  padding-right: 1rem;
+
+  /* order actionbar items horizontal */
+  display: flex;
+  justify-content: flex-start;
+
+  /* ensure space between action bar items */
+  & > * {
+    /* 
+     * We have to use important, because plugins could use field or control classes like the editor-plugin does.
+     * Those classes overwrite the margin which is ok, if the plugin is the only one which is using the actionbar.
+     * But it looks terrible if another plugin use the actionbar, which does not use field and control classes.
+     */
+    margin: 0 0.75rem 0 0 !important;
+  }
 `;
 
 class Breadcrumb extends React.Component<Props> {
@@ -102,7 +115,7 @@ class Breadcrumb extends React.Component<Props> {
             </ul>
           </FlexStartNav>
           {binder.hasExtension("repos.sources.actionbar") && (
-            <ActionWrapper>
+            <ActionBar>
               <ExtensionPoint
                 name="repos.sources.actionbar"
                 props={{
@@ -115,7 +128,7 @@ class Breadcrumb extends React.Component<Props> {
                 }}
                 renderAll={true}
               />
-            </ActionWrapper>
+            </ActionBar>
           )}
         </div>
         <hr className="is-marginless" />

scm-ui/ui-components/src/repos/changesets/SignatureIcon.tsx

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, {FC} from "react";
+import React, { FC } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {Signature} from "@scm-manager/ui-types";
+import { Signature } from "@scm-manager/ui-types";
 import styled from "styled-components";
 import Icon from "../../Icon";
-import {usePopover} from "../../popover";
+import { usePopover } from "../../popover";
 import Popover from "../../popover/Popover";
 import classNames from "classnames";
 
@@ -45,13 +45,13 @@ const StyledIcon = styled(Icon)`
 
 const StyledDiv = styled.div`
   > *:not(:last-child) {
-    margin-bottom: 24px; 
+    margin-bottom: 24px;
   }
 `;
 
-const SignatureIcon: FC<Props> = ({signatures, className}) => {
+const SignatureIcon: FC<Props> = ({ signatures, className }) => {
   const [t] = useTranslation("repos");
-  const {popoverProps, triggerProps} = usePopover();
+  const { popoverProps, triggerProps } = usePopover();
 
   if (!signatures.length) {
     return null;
@@ -80,37 +80,60 @@ const SignatureIcon: FC<Props> = ({signatures, className}) => {
     }
 
     if (signature.status === "NOT_FOUND") {
-      return <p>
+      return (
-        <div>{t("changeset.keyId")}: {signature.keyId}</div>
+        <p>
-        <div>{t("changeset.signatureStatus")}: {status}</div>
+          <div>
-      </p>;
+            {t("changeset.keyId")}: {signature.keyId}
+          </div>
+          <div>
+            {t("changeset.signatureStatus")}: {status}
+          </div>
+        </p>
+      );
     }
 
-    return <p>
+    return (
-      <div>{t("changeset.keyId")}: {
+      <p>
-        signature._links?.rawKey ? <a href={signature._links.rawKey.href}>{signature.keyId}</a> : signature.keyId
+        <div>
-      }</div>
+          {t("changeset.keyId")}:{" "}
-      <div>{t("changeset.signatureStatus")}: <span className={classNames(`has-text-${getColor([signature])}`)}>{status}</span></div>
+          {signature._links?.rawKey ? <a href={signature._links.rawKey.href}>{signature.keyId}</a> : signature.keyId}
-      <div>{t("changeset.keyOwner")}: {signature.owner || t("changeset.noOwner")}</div>
+        </div>
-      {signature.contacts && signature.contacts.length > 0 && <>
+        <div>
-        <div>{t("changeset.keyContacts")}:</div>
+          {t("changeset.signatureStatus")}:{" "}
-        {signature.contacts && signature.contacts.map(contact =>
+          <span className={classNames(`has-text-${getColor([signature])}`)}>{status}</span>
-          <div>- {contact.name}{contact.mail && ` <${contact.mail}>`}</div>)}
+        </div>
-      </>}
+        <div>
-    </p>;
+          {t("changeset.keyOwner")}: {signature.owner || t("changeset.noOwner")}
+        </div>
+        {signature.contacts && signature.contacts.length > 0 && (
+          <>
+            <div>{t("changeset.keyContacts")}:</div>
+            {signature.contacts &&
+              signature.contacts.map(contact => (
+                <div>
+                  - {contact.name}
+                  {contact.mail && ` <${contact.mail}>`}
+                </div>
+              ))}
+          </>
+        )}
+      </p>
+    );
   };
 
   const signatureElements = signatures.map(signature => createSignatureBlock(signature));
 
   return (
     <>
-      <Popover title={<h1 className="has-text-weight-bold is-size-5">{t("changeset.signatures")}</h1>} width={500} {...popoverProps}>
+      <Popover
-        <StyledDiv>
+        title={<h1 className="has-text-weight-bold is-size-5">{t("changeset.signatures")}</h1>}
-          {signatureElements}
+        width={500}
-        </StyledDiv>
+        {...popoverProps}
+      >
+        <StyledDiv>{signatureElements}</StyledDiv>
       </Popover>
       <div {...triggerProps}>
-        <StyledIcon name="key" className={className} color={getColor(signatures)}/>
+        <StyledIcon name="key" className={className} color={getColor(signatures)} />
       </div>
     </>
   );