Merge pull request #190 from frappe/develop

chore: Merge develop to main

crm/fcrm/doctype/crm_view_settings/crm_view_settings.json

@@ -6,6 +6,7 @@
  "engine": "InnoDB",
  "field_order": [
   "label",
+  "icon",
   "user",
   "is_default",
   "column_break_zacm",
@@ -111,11 +112,16 @@
    "fieldname": "is_default",
    "fieldtype": "Check",
    "label": "Is Default"
+  },
+  {
+   "fieldname": "icon",
+   "fieldtype": "Data",
+   "label": "Icon"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-02-03 18:38:09.412745",
+ "modified": "2024-05-20 17:24:18.662389",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM View Settings",

crm/fcrm/doctype/crm_view_settings/crm_view_settings.py

@@ -27,6 +27,7 @@ def create(view):
 	doc = frappe.new_doc("CRM View Settings")
 	doc.name = view.label
 	doc.label = view.label
+	doc.icon = view.icon
 	doc.dt = view.doctype
 	doc.user = frappe.session.user
 	doc.route_name = view.route_name or ""
@@ -52,6 +53,7 @@ def update(view):
 
 	doc = frappe.get_doc("CRM View Settings", view.name)
 	doc.label = view.label
+	doc.icon = view.icon
 	doc.route_name = view.route_name or ""
 	doc.load_default_columns = view.load_default_columns or False
 	doc.filters = json.dumps(filters)

frontend/src/components/FadedScrollableDiv.vue

@@ -1,29 +1,75 @@
 <template>
-  <div ref="scrollableDiv" class="scrr" :style="`maskImage: ${maskStyle}`">
+  <div
+    ref="scrollableDiv"
+    :style="`maskImage: ${maskStyle}`"
+    @scroll="updateMaskStyle"
+  >
     <slot></slot>
   </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 const props = defineProps({
-  maskHeight: {
+  maskLength: {
     type: Number,
-    default: 20,
+    default: 30,
+  },
+  orientation: {
+    type: String,
+    default: 'vertical',
   },
 })
 
 const scrollableDiv = ref(null)
 const maskStyle = ref('none')
+const side = computed(() =>
+  props.orientation == 'horizontal' ? 'right' : 'bottom'
+)
+
+function updateMaskStyle() {
+  if (!scrollableDiv.value) return
+
+  let scrollWidth = scrollableDiv.value.scrollWidth
+  let clientWidth = scrollableDiv.value.clientWidth
+  let scrollHeight = scrollableDiv.value.scrollHeight
+  let clientHeight = scrollableDiv.value.clientHeight
+  let scrollTop = scrollableDiv.value.scrollTop
+  let scrollLeft = scrollableDiv.value.scrollLeft
+
+  maskStyle.value = 'none'
+
+  // faded on both sides
+  if (
+    (side.value == 'right' && scrollWidth > clientWidth) ||
+    (side.value == 'bottom' && scrollHeight > clientHeight)
+  ) {
+    maskStyle.value = `linear-gradient(to ${side.value}, transparent, black ${props.maskLength}px, black calc(100% - ${props.maskLength}px), transparent);`
+  }
+
+  // faded on left or top
+  if (
+    (side.value == 'right' && scrollLeft - 20 > clientWidth) ||
+    (side.value == 'bottom' && scrollTop + clientHeight >= scrollHeight)
+  ) {
+    maskStyle.value = `linear-gradient(to ${side.value}, transparent, black ${props.maskLength}px, black 100%, transparent);`
+  }
+
+  // faded on right or bottom
+  if (
+    (side.value == 'right' && scrollLeft == 0) ||
+    (side.value == 'bottom' && scrollTop == 0)
+  ) {
+    maskStyle.value = `linear-gradient(to ${side.value}, black calc(100% - ${props.maskLength}px), transparent 100%);`
+  }
 
-function setMaskStyle() {
-  // show mask only if div is scrollable
-  if (scrollableDiv.value.scrollHeight > scrollableDiv.value.clientHeight) {
-    maskStyle.value = `linear-gradient(to bottom, black calc(100% - ${props.maskHeight}px), transparent 100%);`
-  } else {
+  if (
+    (side.value == 'right' && clientWidth == scrollWidth) ||
+    (side.value == 'bottom' && clientHeight == scrollHeight)
+  ) {
     maskStyle.value = 'none'
   }
 }
 
-onMounted(() => setMaskStyle())
+onMounted(() => setTimeout(() => updateMaskStyle(), 300))
 </script>

frontend/src/components/Filter.vue

@@ -18,7 +18,7 @@
         <Button
           class="rounded-l-none border-l"
           icon="x"
-          @click.stop="clearfilter"
+          @click.stop="clearfilter(false)"
         />
       </Tooltip>
     </template>
@@ -423,7 +423,7 @@ function removeFilter(index) {
 function clearfilter(close) {
   filters.value.clear()
   apply()
-  close()
+  close && close()
 }
 
 function updateValue(value, filter) {

frontend/src/components/IconPicker.vue

@@ -66,7 +66,7 @@
 <script setup>
 import { gemoji } from 'gemoji'
 import { Popover } from 'frappe-ui'
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 const search = ref('')
 const emoji = defineModel()
@@ -109,5 +109,9 @@ function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min)
 }
 
+onMounted(() => {
+  if (!emoji.value) setRandom()
+})
+
 defineExpose({ setRandom })
 </script>

frontend/src/components/Layouts/AppSidebar.vue

@@ -115,7 +115,7 @@ import { viewsStore } from '@/stores/views'
 import { notificationsStore } from '@/stores/notifications'
 import { FeatherIcon } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, h } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
@@ -196,7 +196,7 @@ function parseView(views) {
   return views.map((view) => {
     return {
       label: view.label,
-      icon: getIcon(view.route_name),
+      icon: getIcon(view.route_name, view.icon),
       to: {
         name: view.route_name,
         query: { view: view.name },
@@ -205,7 +205,9 @@ function parseView(views) {
   })
 }
 
-function getIcon(routeName) {
+function getIcon(routeName, icon) {
+  if (icon) return h('div', { class: 'size-auto' }, icon)
+
   switch (routeName) {
     case 'Leads':
       return LeadsIcon

frontend/src/components/Modals/ViewModal.vue

@@ -21,20 +21,35 @@
     }"
   >
     <template #body-content>
-      <FormControl
-        variant="outline"
-        size="md"
-        type="text"
-        :label="__('View Name')"
-        :placeholder="__('My Open Deals')"
-        v-model="view.label"
-      />
+      <div class="mb-1.5 block text-base text-gray-600">
+        {{ __('View Name') }}
+      </div>
+      <div class="flex gap-2">
+        <IconPicker v-model="view.icon" v-slot="{ togglePopover }">
+          <Button
+            variant="outline"
+            size="md"
+            class="flex size-8 text-2xl leading-none"
+            :label="view.icon"
+            @click="togglePopover"
+          />
+        </IconPicker>
+        <TextInput
+          class="flex-1"
+          variant="outline"
+          size="md"
+          type="text"
+          :placeholder="__('My Open Deals')"
+          v-model="view.label"
+        />
+      </div>
     </template>
   </Dialog>
 </template>
 
 <script setup>
-import { call } from 'frappe-ui'
+import IconPicker from '@/components/IconPicker.vue'
+import { call, TextInput } from 'frappe-ui'
 import { ref, watch, nextTick } from 'vue'
 
 const props = defineProps({
@@ -60,6 +75,7 @@ const duplicateMode = ref(false)
 const _view = ref({
   name: '',
   label: '',
+  icon: '',
   filters: {},
   order_by: 'modified desc',
   columns: '',

frontend/src/components/SidebarLink.vue

@@ -11,13 +11,13 @@
       <div class="flex items-center truncate">
         <Tooltip :text="label" placement="right" :disabled="!isCollapsed">
           <slot name="icon">
-            <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
+            <span class="grid flex-shrink-0 place-items-center">
               <FeatherIcon
                 v-if="typeof icon == 'string'"
                 :name="icon"
-                class="h-4.5 w-4.5 text-gray-700"
+                class="size-4.5 text-gray-700"
               />
-              <component v-else :is="icon" class="h-4.5 w-4.5 text-gray-700" />
+              <component v-else :is="icon" class="size-4.5 text-gray-700" />
             </span>
           </slot>
         </Tooltip>