1010 - Updating text and link property (#1047)

mattermost-community · Aug 23, 2021 · a6cd2c9 · a6cd2c9
1 parent 74161aa
commit a6cd2c9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 7 deletions.
diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss
@@ -10,9 +10,11 @@
         color: rgba(var(--center-channel-color-rgb), 0.4);
         width: 100%;
         align-items: flex-start;
+
         .Button {
             display: none;
         }
+
         &:hover {
             .Button {
                 display: flex;
@@ -24,6 +26,7 @@
         display: flex;
         flex-direction: column;
         width: 100%;
+
         .MenuWrapper {
             position: relative;
             align-self: center;
@@ -33,8 +36,13 @@
     .octo-propertyrow {
         display: flex;
         flex-direction: row;
-        margin: 8px 0;
+        margin: 4px 0;
+        height: 32px;
+
         .octo-propertyvalue {
+            font-size: 14px;
+            width: 100%;
+
             .MenuWrapper {
                 display: flex;
                 align-items: center;
@@ -46,25 +54,31 @@
         width: 150px;
         margin-right: 5px;
         color: rgba(var(--center-channel-color-rgb), 0.6);
+
         .Button {
             text-align: left;
             justify-content: unset;
         }
+
         &.add-property {
             color: rgba(var(--center-channel-color-rgb), 0.4);
         }
     }
 
     &.content-blocks {
-        &:hover, &:focus-within {
+
+        &:hover,
+        &:focus-within {
             .CardDetailContentsMenu {
                 .Button {
                     opacity: 1;
                 }
             }
         }
+
         .CardDetailContentsMenu {
             margin-left: 48px;
+
             .Button {
                 opacity: 0;
                 color: rgba(var(--center-channel-color-rgb), 0.6);

diff --git a/webapp/src/components/properties/link/link.scss b/webapp/src/components/properties/link/link.scss
@@ -1,20 +1,41 @@
 .focalboard-body .property-link {
+    display: flex;
+    align-items: center;
+
     &.url {
-        padding-right: 2rem;
+        width: 100%;
     }
 
-    a {
-        padding: 8px; // increases clickable area for better UX
+    .Link__button {
         display: none;
+        flex: 0 0 24px;
+        width: 24px;
+        height: 24px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 14.4px;
+        margin-left: 8px;
+
+        &:hover {
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+        }
+
+        &:active {
+            color: var(--button-bg-rgb);
+            background-color: rgb(var(--button-bg-rgb), 0.16);
+        }
     }
 
     a:hover {
         background:  unset;
     }
 
     &:hover {
-        a {
-            display: inline;
+        .Link__button {
+            display: flex;
         }
     }
 }

diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx
@@ -22,6 +22,7 @@ const URLProperty = (props: Props): JSX.Element => {
     if (props.value?.trim()) {
         link = (
             <a
+                className='Link__button'
                 href={Utils.ensureProtocol(props.value.trim())}
                 target='_blank'
                 rel='noreferrer'