From bc43ec49e879bce9d5fb7194e94bb97a89617fb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 28 Feb 2022 15:32:22 +0000
Subject: [PATCH] Rounded calendar UI

---
 www/calendar/app-calendar.less            | 59 ++++++++++++++++++++---
 www/calendar/inner.js                     |  2 +-
 www/common/application_config_internal.js |  1 +
 3 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less
index d48914532..05bc4f31f 100644
--- a/www/calendar/app-calendar.less
+++ b/www/calendar/app-calendar.less
@@ -2,6 +2,7 @@
 @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
 @import (reference) '../../customize/src/less2/include/tools.less';
 @import (reference) '../../customize/src/less2/include/avatar.less';
+@import (reference) '../../customize/src/less2/include/variables.less';
 
 &.cp-app-calendar {
 
@@ -117,6 +118,7 @@
         .tui-full-calendar-popup-container {
             background: @cp_flatpickr-bg;
             color: @cryptpad_text_col;
+            border-radius: @variables_radius;
             .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) {
                 display: none;
             }
@@ -182,6 +184,11 @@
                 .tui-full-calendar-section-allday {
                     width: 100%;
                     height: 32px;
+                    border-radius: @variables_radius;
+                    .tui-full-calendar-ic-checkbox {
+                        margin-left: 5px;
+                        border-radius: 2px;
+                    }
                 }
             }
         }
@@ -255,7 +262,8 @@
                 align-items: center;
                 margin-bottom: 20px;
                 input {
-                    width: 100px;
+                    width: 80px;
+                    margin-right: 5px;
                 }
             }
         }
@@ -273,6 +281,26 @@
     #cp-toolbar .cp-calendar-browse {
         display: flex;
         align-items: center;
+        button {
+            color: @cp_toolbar-fg;
+            border-color: @cp_toolbar-fg;
+            &:hover {
+                background-color: fade(@cp_toolbar-fg, 50%); //XXX check light theme
+                cursor: pointer;
+            }
+        }
+    }
+
+    .cp-calendar-newevent {
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    .cp-toolbar-bottom-right button, .cp-toolbar-user button {
+        &:hover {
+            cursor: pointer;
+        }
     }
 
     #cp-sidebarlayout-leftside {
@@ -300,7 +328,7 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                margin: 5px 0;
+                margin: 5px 0 10px 0;
                 &:not(:first-child) {
                     margin-top: 30px;
                 }
@@ -310,12 +338,20 @@
                 align-items: center;
                 justify-content: space-between;
                 padding: 5px;
+                border-radius: @variables_radius;
+                background-color: @cp_sidebar-left-bg;
                 &:not(.cp-unclickable) {
                     cursor: pointer;
                 }
                 .cp-dropdown-container {
                     position: initial;
                 }
+                button.cp-calendar-actions {
+                    background-color: transparent;
+                    &:hover {
+                        background-color: @cp_sidebar-left-bg;
+                    }
+                }
                 &.cp-ghost {
                     padding: 0;
                     button {
@@ -326,12 +362,19 @@
                         justify-content: space-between;
                         background: transparent;
                         border: 1px solid @cryptpad_text_col;
+                        border-radius: @variables_radius;
+                        padding: 5px;
                         height: 36px;
                         font: @colortheme_app-font;
                         align-items: center;
                         color: @cryptpad_text_col;
                         &:hover {
-                            background: @cp_sidebar-left-active;
+                            background-color: @cp_sidebar-left-active;
+                            color: @cp_sidebar-left-active-fg;
+                            border: 0px;
+                        }
+                        i {
+                            margin-left: 5px;
                         }
                     }
                 }
@@ -339,21 +382,21 @@
                     margin-bottom: 10px;
                 }
                 &:hover {
-                    background: fade(@cryptpad_text_col, 10%);
+                    background: @cp_sidebar-left-item-bg;
                 }
                 &.cp-restricted {
                     color: @cp_drive-header-fg;
                 }
                 .cp-calendar-icon {
-                    width: 36px;
+                    width: 30px;
                     display: inline-flex;
-                    height: 36px;
-                    margin: -5px;
+                    height: 30px;
                     align-items: center;
                     justify-content: center;
+                    border-radius: @variables_radius;
                 }
                 &.cp-active {
-                    background: @cp_sidebar-left-active;
+                    background-color: @cp_sidebar-left-item-bg;
                     .cp-calendar-inactive {
                         display: none;
                     }
diff --git a/www/calendar/inner.js b/www/calendar/inner.js
index 80b5606f2..2f1475f48 100644
--- a/www/calendar/inner.js
+++ b/www/calendar/inner.js
@@ -599,7 +599,7 @@ define([
             text: '',
             options: options, // Entries displayed in the menu
             common: common,
-            buttonCls: 'btn btn-cancel fa fa-ellipsis-h small'
+            buttonCls: 'btn btn-default fa fa-gear small cp-calendar-actions'
         };
         return UIElements.createDropdown(dropdownConfig)[0];
     };
diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js
index 3360e4f15..217b8a1f5 100644
--- a/www/common/application_config_internal.js
+++ b/www/common/application_config_internal.js
@@ -135,6 +135,7 @@ define(function() {
         whiteboard: 'cptools-whiteboard',
         todo: 'cptools-todo',
         contacts: 'fa-address-book',
+        calendar: 'fa-calendar',
         kanban: 'cptools-kanban',
         doc: 'fa-file-word-o',
         presentation: 'fa-file-powerpoint-o',