fix(user): prevent profile picture drag (#3133)

Satellite-im · May 16, 2022 · 2f86b32 · 2f86b32
1 parent b4932fe
commit 2f86b32
Show file tree

Hide file tree

Showing 21 changed files with 32 additions and 29 deletions.
diff --git a/assets/styles/framework/ui.less b/assets/styles/framework/ui.less
@@ -61,3 +61,10 @@
 }
 
 @mini-light-border: 1px solid rgba(199, 206, 246, 0.25);
+
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
diff --git a/components/interactables/AsideMenu/AsideMenu.less b/components/interactables/AsideMenu/AsideMenu.less
@@ -2,7 +2,7 @@
   .menu-list {
     a {
       -webkit-user-drag: none;
-      user-select: none;
+      &:extend(.no-select);
     }
     margin-bottom: @normal-spacing;
   }
@@ -16,5 +16,5 @@
   padding: @xlarge-spacing;
   position: relative;
   -webkit-user-drag: none;
-  user-select: none;
+  &:extend(.no-select);
 }
diff --git a/components/interactables/Select/Select.less b/components/interactables/Select/Select.less
@@ -27,7 +27,7 @@
     padding-left: @normal-spacing;
     padding-right: @normal-spacing * 2;
     cursor: pointer;
-    user-select: none;
+    &:extend(.no-select);
     max-width: @full;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -59,7 +59,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-      user-select: none;
+      &:extend(.no-select);
       &[disabled] {
         opacity: 0.5;
       }

diff --git a/components/ui/CaretDivider/CaretDivider.less b/components/ui/CaretDivider/CaretDivider.less
@@ -33,7 +33,7 @@
       transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
         skewX(-30deg) scaleY(0.866) translateX(24%);
     }
-    user-select: none;
+    &:extend(.no-select);
     background: @red;
     border-radius: @corner-rounding-smaller 0 0 @corner-rounding-smaller;
     display: inline-block;

diff --git a/components/ui/Chat/Image/Image.less b/components/ui/Chat/Image/Image.less
@@ -9,7 +9,7 @@
   &-placeholder {
     text-align: center;
     max-width: 200px;
-    user-select: none;
+    &:extend(.no-select);
     pointer-events: none;
     &-img {
       padding: @normal-spacing;
@@ -29,7 +29,7 @@
 .is-normal-image {
   &:extend(.round-corners);
   max-width: 300px;
-  user-select: none;
+  &:extend(.no-select);
 }
 
 .file-info {

diff --git a/components/ui/Circle/Circle.html b/components/ui/Circle/Circle.html
@@ -9,6 +9,7 @@
     alt="Circle Image"
     :class="`${square ? 'is-square' : 'is-rounded'} image`"
     data-cy="circle-has-picture"
+    draggable="false"
   />
   <UiSatelliteCircle
     v-else-if="type === 'random'"

diff --git a/components/ui/Circle/Circle.less b/components/ui/Circle/Circle.less
@@ -1,11 +1,12 @@
 .circle {
   &:extend(.font-secondary);
+  &:extend(.no-select);
+  display: inline-block;
+  vertical-align: top;
   .image {
     &:extend(.full-width);
     height: @full;
   }
-  display: inline-block;
-  vertical-align: top;
 }
 
 .circle-flex {

diff --git a/components/ui/DroppableWrapper/DroppableWrapper.less b/components/ui/DroppableWrapper/DroppableWrapper.less
@@ -12,7 +12,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    user-select: none;
+    &:extend(.no-select);
     pointer-events: none;
     background-color: transparent;
     border: 5px solid transparent;

diff --git a/components/ui/GlowingCursorArea/GlowingCursorArea.less b/components/ui/GlowingCursorArea/GlowingCursorArea.less
@@ -13,8 +13,8 @@
   width: 0px;
   height: 0px;
   pointer-events: none;
-  user-select: none;
   &:extend(.third-layer);
+  &:extend(.no-select);
   backface-visibility: hidden;
   will-change: transform;
   box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.1);

diff --git a/components/ui/User/User.less b/components/ui/User/User.less
@@ -7,7 +7,7 @@
   &:extend(.round-corners);
   cursor: pointer;
   position: relative;
-  user-select: none;
+  &:extend(.no-select);
   &:extend(.full-width);
   align-items: center;
   &:extend(.light-padding);

diff --git a/components/views/chat/chatbar/Editable.vue b/components/views/chat/chatbar/Editable.vue
@@ -337,11 +337,8 @@ export default Vue.extend({
     overflow: hidden;
     left: 0;
     right: 0;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
     &:extend(.background-layer);
+    &:extend(.no-select);
   }
 
   .editable-input {

diff --git a/components/views/chat/chatbar/footer/Footer.less b/components/views/chat/chatbar/footer/Footer.less
@@ -8,8 +8,7 @@
     float: right;
     margin-right: 2rem;
     font-size: @mini-text-size;
-    user-select: none;
-    -webkit-user-select: none;
+    &:extend(.no-select);
     &:extend(.font-muted);
     margin-left: auto;
     &.is-error {

diff --git a/components/views/chat/enhancers/Enhancers.less b/components/views/chat/enhancers/Enhancers.less
@@ -94,7 +94,7 @@
 .emoji-picker .emojis span {
   display: inline-block;
   cursor: pointer;
-  user-select: none;
+  &:extend(.no-select);
   padding: 0.2rem;
   border-radius: 5px;
 }

diff --git a/components/views/files/aside/List/List.less b/components/views/files/aside/List/List.less
@@ -6,8 +6,7 @@ li {
   align-items: center;
   border-radius: @corner-rounding-smaller;
   &:extend(.full-width);
-  -webkit-user-select: none;
-  user-select: none;
+  &:extend(.no-select);
 
   &:hover {
     background: @foreground;

diff --git a/components/views/files/list/List.less b/components/views/files/list/List.less
@@ -3,8 +3,7 @@
   &:extend(.full-width);
   font-size: @text-size;
   background: transparent;
-  user-select: none;
-  -webkit-user-select: none;
+  &:extend(.no-select);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &.disabled {

diff --git a/components/views/friends/friend/Friend.less b/components/views/friends/friend/Friend.less
@@ -32,7 +32,7 @@
   &:extend(.more-pad-sides);
   display: flex;
   align-items: center;
-  user-select: none;
+  &:extend(.no-select);
   &:extend(.round-corners);
   margin: 0 @light-spacing;
 }
diff --git a/components/views/group/clickable/Clickable.less b/components/views/group/clickable/Clickable.less
@@ -62,6 +62,6 @@
   &:extend(.round-corners);
   cursor: pointer;
   position: relative;
-  user-select: none;
+  &:extend(.no-select);
   &:extend(.full-width);
 }
diff --git a/components/views/message/Friend.less b/components/views/message/Friend.less
@@ -76,6 +76,6 @@
   &:extend(.round-corners);
   cursor: pointer;
   position: relative;
-  user-select: none;
+  &:extend(.no-select);
   &:extend(.full-width);
 }
diff --git a/components/views/navigation/toolbar/Toolbar.less b/components/views/navigation/toolbar/Toolbar.less
@@ -82,7 +82,7 @@
     max-width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
-    user-select: none;
+    &:extend(.no-select);
     pointer-events: none;
 
     .title {

diff --git a/components/views/user/User.less b/components/views/user/User.less
@@ -101,6 +101,6 @@
   &:extend(.round-corners);
   cursor: pointer;
   position: relative;
-  user-select: none;
+  &:extend(.no-select);
   &:extend(.full-width);
 }
diff --git a/layouts/Layout.less b/layouts/Layout.less
@@ -31,7 +31,7 @@
 
 #app {
   display: flex;
-  user-select: none;
+  &:extend(.no-select);
   height: var(--app-height);
 
   .swiper {