Merge pull request #805 from thevoiceofzeke/feedback

feat: prompt confirmation/undo when removing widgets from home

CHANGELOG.md

@@ -13,10 +13,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   uPortal's identity impersonation and attribute swapping features (#802)
 
 ### Changed
-
+* Removing widget from home screen now displays a toast allowing UNDO action before saving changes (#805)
 
 ### Fixed
-
+* Fixed bug that sometimes caused the wrong widget to be removed from user's layout (#804)
 
 ### Dependency upgrades
 

web/src/main/webapp/css/home.less

@@ -159,21 +159,13 @@ div.table-cell {
 
 .layout-list {
   list-style-type: none;
-  padding: 0;
+  padding: 0 12px;
   margin: auto;
-  max-width: 1230px;
-
-  /* Grid Fallback */
+  max-width: @md;
   display: flex;
   flex-wrap: wrap;
-
-  /* Supports Grid */
-  /* stylelint-disable */
-  display: grid;
-  /* stylelint-enable */
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-auto-rows: minmax(296px, 1fr);
-  grid-gap: 4px 8px;
+  flex-direction: row;
+  justify-content: flex-start;
 
   .dndPlaceholder {
     background: rgba(0, 0, 0, 0.12);
@@ -184,25 +176,54 @@ div.table-cell {
   }
 
   .widget-container:not(.dndDraggingSource) {
-    padding-right: 0;
-    padding-left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    flex: 1;
+    flex: 0 0 25%;
     overflow: hidden;
+    transition: flex 0.2s linear, transform 0.3s ease-out, opacity 0.3s linear;
+    padding: 8px;
 
-    widget {
-      display: flex;
-      flex: 1;
+    &.ng-enter.ng-enter-active,
+    &.ng-leave {
+      opacity: 1;
+      flex: 0 0 25%;
+      transform: scaleX(1);
+
+      @media (max-width: @md) {
+        flex: 0 0 33%;
+      }
+
+      @media (max-width: @sm) {
+        flex: 0 0 50%;
+      }
+
+      @media (max-width: @widget-xs) {
+        flex: 0 0 100%;
+      }
+    }
+
+    &.ng-leave.ng-leave-active,
+    &.ng-enter {
+      opacity: 0;
+      flex: 0;
+      transform: scaleX(0);
+    }
 
+    widget {
       .widget-frame {
-        display: flex;
-        flex: 1;
         margin: 0;
       }
     }
+
+    @media (max-width: @md) {
+      flex: 0 0 33%;
+    }
+
+    @media (max-width: @sm) {
+      flex: 0 0 50%;
+    }
+
+    @media (max-width: @widget-xs) {
+      flex: 0 0 100%;
+    }
   }
 
   .dndDraggingSource {

web/src/main/webapp/css/my-app.less

@@ -24,6 +24,7 @@
   @import "uw-portlet.less";
   @import "marketplace.less";
   @import "search-results.less";
+  @import "toast.less";
 }
 
 //Styles that need to be outside of .my-uw. e.g.: popups

web/src/main/webapp/css/toast.less

@@ -0,0 +1,85 @@
+/**
+ * Licensed to Apereo under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work
+ * for additional information regarding copyright ownership.
+ * Apereo licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License.  You may obtain a
+ * copy of the License at the following location:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+md-toast {
+  &.toast__widget-removal {
+    .md-toast-content {
+      background-color: @white;
+      color: @black;
+      padding: 0;
+      align-items: flex-start;
+      max-height: 126px;
+      max-width: 320px;
+
+      &::before {
+        min-height: 0;
+      }
+
+      .toast__message {
+        padding: 16px;
+        width: 100%;
+
+        .toast__source {
+          font-size: 12px;
+        }
+
+        .toast__icon-container {
+          display: flex;
+          height: 44px;
+          width: 44px;
+          max-width: 44px;
+          margin-right: 16px;
+          background: #e5e5e5;
+          border-radius: 50%;
+          justify-content: center;
+          align-items: center;
+
+          .fa,
+          .material-icons {
+            font-size: 24px;
+          }
+        }
+      }
+
+      .toast__actions {
+        background-color: @grayscale2;
+        width: 100%;
+      }
+
+      .md-button {
+        min-width: 60px;
+      }
+    }
+
+    @media (max-width: @sm) {
+      position: fixed;
+      padding: 16px;
+
+      .md-toast-content {
+        max-width: none;
+
+        .toast__actions {
+          .md-button {
+            margin-left: 0;
+            margin-right: 12px;
+          }
+        }
+      }
+    }
+  }
+}

web/src/main/webapp/css/variables.less

@@ -24,9 +24,10 @@
 @home-view-1: 59;
 
 /* Media queries */
+@widget-xs: 680px;
 @xs: 600px;
 @sm: 960px;
-@md: 1280px;
+@md: 1260px;
 @lg: 1920px;
 
 // GRAYSCALE