Fix list hover

packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss

@@ -7,7 +7,7 @@
   padding: 1rem 2.8rem 0rem 2.8rem;
   border-radius: 0.2rem;
   background-color: #FFFFFF;
-  // background-color: red;
+
   box-shadow: 0 0.2rem 0.4rem 0 #E3E9F3;
 }
 
@@ -19,7 +19,6 @@
   display: flex;
   justify-content: space-between;
   margin-top: 0.8rem;
-  // margin-bottom: 2.5rem;
 }
 
 .titleContainer {
@@ -35,25 +34,31 @@
   padding-top: 1rem;
   margin: 0 3.3rem;
   background-color: #FFFFFF;
-  // background-color: red;
   box-shadow: 0 0.2rem 0.4rem 0 #E3E9F3;
   > ul {
     list-style: none;
     padding: 0;
-    // .borderBottom {
-    //   &:last-child{
-    //     border-bottom: none;
-    //   }
+
     > li {
       line-height: 5.2rem;
       height: 5.2rem;
-
+      position: relative;
       border-bottom: 1px solid transparent;
+      &:after {
+        padding-top: 0;
+      }
       &:last-of-type {
         border: none;
       }
       &:hover {
-        background-color: rgba(14,22,34,0.03);
+        .hovered {
+          position: absolute;
+          top: -.2rem;
+          height: 5.3rem;
+          margin-right: 13rem!important;
+          width: 100%;
+          background-color: rgba(14,22,34,0.03);
+        }
       }
     }
     >li:first-child {
@@ -61,6 +66,9 @@
       padding-bottom: 5.1rem;
       height: 5.2rem;
       line-height: 5.2rem;
+      .hovered {
+        top: .1rem!important;
+      }
     }
 
     > li:last-child .borderBottom {
@@ -69,6 +77,7 @@
   }
 }
 
+
 .liSpacer {
   height: .2rem!important;
 }
@@ -116,9 +125,7 @@
   > button {
     padding-right: 0;
     padding-top: .2rem;
-    // margin-top: .1rem;
     &:first-child {
-      // margin-top: .1rem;
     }
     > div {
       padding-top: .2rem;
@@ -133,12 +140,12 @@
   height: 100%;
   height: 5.2rem;
   line-height: 5.2rem;
+  padding-right: .3rem;
 }
 
 .normal {
   font-family: Lato;
   color: #1C5DE7;
-  // padding-top: 0rem;
 }
 
 .primary {
@@ -183,6 +190,15 @@
   border-bottom: 1px solid #F6F6F6;
 }
 
+.dbHost {
+  width: 22rem;
+  text-align: center;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .noBorder {
   border: none!important;
 }
@@ -309,6 +325,16 @@
 
 .databaseFont {
   font-size: 1.3rem;
+  &:hover {
+    .hovered {
+      position: absolute;
+      top: -.5rem!important;
+      height: 5.2rem;
+      margin-right: 13rem!important;
+      width: 100%;
+      background-color: rgba(14,22,34,0.03);
+    }
+  }
 }
 
 .flagContainer {

packages/strapi-plugin-settings-manager/admin/src/components/RowDatabase/index.js

@@ -29,9 +29,11 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
-  showDatabaseModal = () => {
-    this.setState({ modal: !this.state.modal });
-    this.props.getDatabase(this.props.data.name);
+  showDatabaseModal = (e) => {
+    if (e.target.id !== 'trash') {
+      this.setState({ modal: !this.state.modal });
+      this.props.getDatabase(this.props.data.name);
+    }
   }
 
   toggle = () => {
@@ -52,8 +54,9 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
 
   render() {
     return (
-      <li className={styles.databaseFont} style={{ cursor: 'pointer'}} >
-        <div style={{ position: 'absolute', width: '73rem', height: '5.2rem'}} onClick={this.showDatabaseModal}></div>
+      <li className={styles.databaseFont} style={{ cursor: 'pointer'}} onClick={this.showDatabaseModal}>
+        <div className={styles.hovered} />
+
         <div className={styles.flexLi}>
           <div className={styles.flexed}>
             <div className={styles.squared} style={{ backgroundColor: this.props.data.color }}>
@@ -61,12 +64,14 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
             </div>
             <div className={styles.label} style={{ fontWeight: '500'}}>{this.props.data.name}</div>
           </div>
-          <div onClick={this.showDatabaseModal}>{this.props.data.host}</div>
-          <div className={styles.centered} style={{ width: '15rem'}} onClick={this.showDatabaseModal}>{this.props.data.database}</div>
-          <div className={styles.flexed} style={{ width: '4rem', justifyContent: 'space-between'}}>
+          <div className={styles.dbHost}>
+            {this.props.data.host}
+          </div>
+          <div className={styles.centered} style={{ width: '8rem'}}>{this.props.data.database}</div>
+          <div className={styles.flexed} style={{ minWidth: '4rem', justifyContent: 'space-between'}}>
 
-            <div className={styles.ico}><i className="fa fa-pencil" onClick={this.showDatabaseModal} id={this.props.data.name} /></div>
-            <div className={`${styles.leftSpaced} ${styles.ico}`}><i id={this.props.data.name} className="fa fa-trash" onClick={this.toggleWarning} /></div>
+            <div className={styles.ico}><i className="fa fa-pencil" id={this.props.data.name} /></div>
+            <div className={`${styles.leftSpaced} ${styles.ico}`}><i id="trash" className="fa fa-trash" onClick={this.toggleWarning} /></div>
           </div>
         </div>
         <div className={styles.borderBottom} style={{ margin: `-.4rem 4.8rem 0 2.8rem`}} />

packages/strapi-plugin-settings-manager/admin/src/components/RowLanguage/index.js

@@ -57,8 +57,10 @@ class RowLanguage extends React.Component { // eslint-disable-line react/prefer-
         </FormattedMessage>;
     const spacer = this.props.active ? <div className={this.props.liStyles.liSpacer} /> : '';
     const borderPosition = this.props.active ? '-.3rem' : '-.6rem';
+
     return (
       <li>
+        <div className={this.props.liStyles.hovered} />
         {spacer}
         <div className={this.props.liStyles.flexLi}>
           <div className={`${this.props.liStyles.flexed} ${this.props.liStyles.flagContainer}`}>

packages/strapi-plugin-settings-manager/admin/src/translations/en.json

@@ -142,7 +142,7 @@
   "popUpWarning.title": "Please confirm",
   "popUpWarning.databases.danger.message": "Content Types are still linked with this connection. By removing it, you could cause criticals issues to your app. Be careful...",
   "popUpWarning.danger.ok.message": "I Understand",
-  "popUpWarning.databases.delete.message": "Are you sure you want to delete this language ?",
+  "popUpWarning.databases.delete.message": "Are you sure you want to delete this database ?",
   "popUpWarning.languages.delete.message": "Are you sure you want to delete this language ?",
   "strapi.notification.info.settingsEqual": "Settings are equals",
   "strapi.notification.success.databaseDelete": "Deleting databse...",