diff --git a/css/app-sidebar.scss b/css/app-sidebar.scss
index d2cb1a6345f219fcac6113d0a1311fb089fc5858..eceecaa471d34b967a96ae428ead2e0f64217046 100644
--- a/css/app-sidebar.scss
+++ b/css/app-sidebar.scss
@@ -21,867 +21,906 @@
*
*/
-.app-sidebar,
-.event-popover .popover__inner {
- .app-sidebar-header__figure {
- height: unset !important;
- }
-
- .property-text-location {
- align-items: stretch !important;
- position:relative;
- textarea {
- border-right: 0px;
- padding-right:27px;
- }
- .icon-externallink {
- background-image: var(--icon-calendar-openlink-0075E0);
- opacity: 1;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 2;
- display: block;
- width: 34px;
- height: 100%;
- line-height: 34px;
- text-align: center;
- cursor:pointer;
- }
- }
-
- .app-sidebar-header__action {
- margin-top: 0 !important;
- max-height: none !important;
- flex-wrap: wrap;
-
- div {
- flex-shrink: 0;
- }
- }
-
- /** Hide the submit button for the title, because it does not trigger a save */
- .app-sidebar-header__desc {
- .app-sidebar-header__maintitle-form {
- button {
- display: none;
- }
- }
- }
-
- .editor-invitee-list-empty-message,
- .editor-reminders-list-empty-message,
- .editor-invitee-list-no-email-configured-message {
- margin-top: 20px;
-
- &__icon {
- background-size: 50px;
- height: 50px;
- width: 50px;
- margin: 0 auto;
- opacity: 0.5;
- }
-
- &__caption {
- margin-top: 8px;
- text-align: center;
- color: var(--color-text-lighter);
- }
- }
-
- .editor-invitee-list-no-email-configured-message {
- &__icon {
- font-size: 50px;
- line-height: 1em;
- user-select: none;
- }
- }
-
- .editor-reminders-list-new-button {
- width: 100%;
- background-position-x: 8px;
- }
-
- .app-sidebar-tab {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- overflow: unset !important;
- max-height: unset !important;
- height: auto !important;
-
- &__buttons {
- padding-top: 14px;
- position: fixed;
- bottom: 0px;
- z-index: 2;
- width: calc(27vw - 11px);
- min-width: 300px - 11px;
- max-width: 500px - 11px;
- right: 10px;
- background-color: var(--color-main-background);
- padding-left: 22px;
- padding-right: 22px;
-
- button {
- width: 100%;
- height: 44px;
- }
- }
- &__content {
- margin-bottom: 120px;
- }
- }
-
- .property-title-time-picker-loading-placeholder {
- width: 100%;
-
- &__icon {
- margin: 0 auto;
- height: 62px;
- width: 62px;
- background-size: 62px;
- }
- }
-
- .app-sidebar__loading-indicator {
- width: 100%;
- margin-top: 20vh;
-
- &__icon {
- margin: 0 auto;
- height: 44px;
- width: 44px;
- background-size: 44px;
- }
- }
-
- .repeat-option-set {
- .repeat-option-set-section {
- &:not(:first-of-type) {
- margin-top: 20px;
- }
-
- &--on-the-select {
- display: flex;
- align-items: center;
-
- .multiselect {
- width: 100%;
- min-width: 100px !important; // Set a lower min-width
- }
- }
-
- &__title {
- list-style: none;
- }
-
- &__grid {
- display: grid;
- grid-gap: 0;
- .primary{
- background-color:var(--color-primary-element) !important;
- color:var(--color-primary-text)!important;
- }
- .repeat-option-set-section-grid-item {
- padding: 8px;
- border: 1px solid var(--color-border-dark);
- text-align: center;
- margin: 0;
- border-radius: 0;
- background-color:#ffffff;
- color:var(--color-primary-element);
- }
- }
- }
-
- &--weekly,
- &--monthly {
- .repeat-option-set-section {
- &__grid {
- grid-template-columns: repeat(7, auto);
- }
- }
- }
-
- &--yearly {
- .repeat-option-set-section {
- &__grid {
- grid-template-columns: repeat(4, auto);
- }
- }
- }
-
- &--interval-freq {
- display: flex;
- align-items: center;
-
- .multiselect,
- input[type="number"] {
- min-width: 100px;
- width: 25%;
- }
- }
-
- &--end {
- margin-top: 20px;
- display: flex;
- align-items: center;
-
- .repeat-option-end {
- &__label,
- &__end-type-select {
- display: block;
- min-width: 75px;
- width: 25%;
- }
-
- &__until {
- min-width: 75px;
- width: 50%;
- }
-
- &__count {
- min-width: 75px;
- width: 25%;
- }
- }
- }
-
- &__label {
- margin-right: auto;
- }
- }
-
- .repeat-option-warning {
- text-align: center;
- }
-
- .property-title-time-picker {
- width: 100%;
-
- &__time-pickers,
- &__all-day {
- display: flex;
- align-items: center;
- }
-
- &__time-pickers {
- justify-content: space-between;
-
- .mx-datepicker {
- width: 49%;
-
- .mx-input-append {
- background-color: transparent !important;
- }
- }
-
- &--readonly {
- .property-title-time-picker-read-only-wrapper {
- display: flex;
- align-items: center;
- width: 50%;
- margin: 3px 3px 3px 0;
- padding: 8px 7px;
- background-color: var(--color-main-background);
- color: var(--color-main-text);
- outline: none;
-
- &__icon {
- margin-left: 8px;
- height: 16px;
- width: 16px;
- opacity: 0.3;
-
- &--highlighted {
- opacity: 0.7;
- }
-
- &:focus,
- &:hover {
- opacity: 1;
- }
- }
- }
- }
- }
-
- @media screen and (max-width: 1500px) {
- &__time-pickers {
- display: block;
- }
-
- .mx-datepicker {
- width: 100%;
- }
-
- .property-title-time-picker-read-only-wrapper {
- width: 100%;
- }
- }
-
- &__all-day {
- justify-content: flex-start;
- }
-
- .datetime-picker-inline-icon {
- margin-top: 17px;
- opacity: 0.3;
- border: none;
- background-color: transparent;
- border-radius: 0;
- padding: 6px !important;
-
- &--highlighted {
- opacity: 0.7;
- }
-
- &:focus,
- &:hover {
- opacity: 1;
- }
- }
- }
-
- .property-alarm-list {
- width: 100%;
- }
-
- .property-alarm-item {
- display: flex;
- align-items: center;
- min-height: 44px;
-
- &__icon {
- align-self: flex-start;
-
- &--hidden {
- visibility: hidden;
- }
-
- .icon {
- width: 34px;
- height: 44px;
- margin-left: -5px;
- margin-right: 5px;
- // TODO: enable me again if the other icons on the details tab have an opacity too
- // opacity: .7;
- }
- }
-
- &__label {
- padding: 0 7px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- align-self: center;
- }
-
- &__options {
- margin-left: auto;
- display: flex;
- align-items: center;
- white-space: nowrap;
- }
-
- &__edit {
- display: flex;
- align-items: center;
- width: 100%;
- min-width: 0;
- padding-right: 8px;
-
- input[type="number"] {
- width: 3em;
- }
-
- .multiselect {
- flex: 1 auto;
- height: 34px;
- min-width: 0;
- }
-
- .mx-datepicker {
- flex: 1 auto;
- }
-
- &--timed {
- }
-
- &--all-day {
- flex-wrap: wrap;
- margin-bottom: 5px;
- gap: 0 5px;
-
- &__distance,
- &__time {
- display: flex;
- flex: 1;
- align-items: center;
- }
-
- &__distance {
- .multiselect {
- width: 6em;
- }
- }
-
- &__time {
- &__before-at-label {
- flex: 0 0 auto;
- margin-right: 5px;
- }
-
- .mx-datepicker {
- width: 7em;
- }
- }
- }
-
- &--absolute {
- .mx-datepicker {
- width: unset;
- }
- }
- }
- }
-
- .property-repeat {
- width: 100%;
-
- &__summary {
- display: flex;
- align-items: center;
- margin-bottom: 5px;
-
- &__icon {
- width: 34px;
- height: 34px;
- margin-left: -5px;
- margin-right: 5px;
- }
-
- &__content {
- flex: 1 auto;
- padding: 0 7px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
-
- &__options {
- margin-bottom: 5px;
- }
- }
-
- .resource-search__multiselect,
- .invitees-search__multiselect {
- width: 100%;
-
- .resource-search-list-item,
- .invitees-search-list-item {
- display: flex;
- align-items: center;
- width: 100%;
-
- // Account for avatar width (because it is position: relative)
- padding-right: 32px;
-
- &__label {
- width: 100%;
- padding: 0 8px;
-
- &__availability {
- color: var(--color-text-maxcontrast);
- }
-
- div {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- div:nth-child(1) {
- color: var(--color-main-text);
- }
-
- div:nth-child(2) {
- color: var(--color-text-lighter);
- line-height: 1;
- }
- }
- }
- }
-
- .resource-list-item,
- .invitees-list-item {
- display: flex;
- align-items: center;
- min-height: 44px;
-
- &__displayname {
- margin-left: 8px;
- }
-
- &__actions {
- margin-left: auto;
- }
-
- &__organizer-hint {
- color: var(--color-text-maxcontrast);
- font-weight: 300;
- margin-left: 5px;
- }
- }
-
- .resource-search {
- &__capacity {
- display: flex;
- align-items: center;
-
- &__actions {
- margin-left: 5px;
- }
- }
- }
-
- .avatar-participation-status {
- position: relative;
- height: 38px;
- width: 38px;
-
- &__indicator {
- position: absolute;
- bottom: 0;
- right: 0;
- background-size: 10px;
- height: 15px;
- width: 15px;
- border-radius: 50%;
- }
-
- &__indicator.accepted {
- background-color: #2fb130;
- }
-
- &__indicator.declined {
- background-color: #ff0000;
- }
-
- &__indicator.tentative {
- background-color: #ffa704;
- }
-
- &__indicator.delegated,
- &__indicator.no-response {
- background-color: grey;
- }
- }
- .property-text,
- .property-text-location,
- .property-select,
- .property-color,
- .property-select-multiple,
- .property-title,
- .resource-capacity,
- .resource-room-type {
- display: flex;
- width: 100%;
- align-items: flex-start;
- margin-bottom: 5px;
-
- &__icon,
- &__info {
- height: 34px;
- width: 34px;
- }
-
- &__icon {
- &--hidden {
- visibility: hidden;
- }
- }
-
- &__info {
- display: flex;
- justify-content: center;
- opacity: 0.5;
- }
-
- &__info:hover {
- opacity: 1;
- }
-
- &__icon {
- margin-left: -5px;
- margin-right: 5px;
- }
-
- &__input {
- flex-grow: 2;
-
- textarea,
- input,
- div.multiselect {
- width: 100%;
- }
-
- textarea {
- max-height: calc(100vh - 600px);
- vertical-align: top;
- margin: 0;
- }
-
- &--readonly {
- div {
- width: calc(100% - 8px); /* for typical (thin) scrollbar size */
- white-space: pre-line;
- margin: 3px 3px 3px 0;
- padding: 8px 7px;
- background-color: var(--color-main-background);
- color: var(--color-main-text);
- outline: none;
- overflow-y: scroll;
- word-break: break-word; /* allows breaking on long URLs */
- max-height: 30vh;
- }
-
- a.linkified {
- text-decoration: underline;
-
- &::after {
- content: " ↗";
- }
- }
- }
-
- &--readonly-calendar-picker {
- div.calendar-picker-option {
- margin: 3px 3px 3px 0;
- padding: 8px 7px;
- }
- }
- }
- }
-
- .property-color {
- &__input {
- display: flex;
- }
-
- &__color-preview {
- border-radius: var(--border-radius);
- height: 34px !important;
- width: 34px !important;
- margin: 0;
- }
- }
-
- .property-text {
- &__input {
- textarea {
- resize: none;
- }
- }
- }
-
- .property-select-multiple {
- .property-select-multiple__input.property-select-multiple__input--readonly {
- width: 100%;
-
- .property-select-multiple-colored-tag-wrapper {
- align-items: center;
- overflow: hidden;
- max-width: 100%;
- position: relative;
- padding: 3px 5px;
-
- .multiselect__tag {
- line-height: 20px;
- padding: 1px 5px;
- background-image: none;
- display: inline-flex;
- align-items: center;
- border-radius: 3px;
- max-width: fit-content;
- margin: 3px;
- }
- }
- }
- }
-
- .property-title {
- &__input,
- &__input input {
- font-size: 20px;
- }
- }
-
- .resource-room-type {
- margin-bottom: 5px;
- }
-
- .illustration-header {
- max-height: 150px;
- height: 150px;
- width: 100%;
- }
-
- .illustration-header svg {
- width: 100%;
- height: 150px;
- padding: 8px 8px 0 8px;
- }
-}
-
-.timezone-popover-wrapper {
- .popover__inner {
- padding: 20px;
- }
-
- &__title {
- margin-bottom: 8px;
- }
-
- &__timezone-select {
- min-width: 200px;
- }
-}
-
-.event-popover {
- .popover__inner {
- text-align: left;
- max-width: 450px;
- width: 450px;
- padding: 5px 8px;
-
- .property-text-location {
- align-items: stretch !important;
- position: relative;
- textarea {
- border-right: 0px;
- }
- }
-
- .empty-content {
- margin-top: 0 !important;
- padding: 50px 0;
- }
-
- .illustration-header {
- height: 100px;
- overflow: hidden;
- margin-bottom: 5px;
- background-color: var(--color-background-dark);
- // There is probably a more elegant solution for this
- margin-top: -5px;
- margin-left: -8px;
- width: 466px;
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- }
-
- .popover__inner {
- max-width: unset !important;
- }
-
- .property-title-time-picker {
- margin-bottom: 12px;
- }
-
- .event-popover__buttons {
- margin-top: 8px;
- display: flex;
-
- button {
- width: 100%;
- }
- }
-
- .event-popover__top-right-actions {
- position: absolute !important;
- top: 0 !important;
- right: 0 !important;
- z-index: 100 !important;
- opacity: 0.7 !important;
- border-radius: 22px !important;
-
- .action-item.action-item--single {
- width: 44px !important;
- height: 44px !important;
- }
- }
-
- .popover-loading-indicator {
- width: 100%;
-
- &__icon {
- margin: 0 auto;
- height: 62px;
- width: 62px;
- background-size: 62px;
- }
- }
- }
-
- &[x-out-of-boundaries] {
- margin-top: 75px;
- }
-}
-
-.event-popover[x-placement^="bottom"] {
- .popover__arrow {
- border-bottom-color: var(--color-background-dark);
- }
-}
-
-.calendar-picker-option {
- display: flex;
- align-items: center;
-
- &__color-indicator {
- width: 12px;
- height: 12px;
- border-radius: 50%;
- border: none;
- margin-right: 8px;
- flex-basis: 12px;
- flex-shrink: 0;
- }
-
- &__label {
- overflow: hidden;
- text-overflow: ellipsis;
- flex-grow: 1;
- }
-
- &__avatar {
- flex-basis: 18px;
- flex-shrink: 0;
- }
-}
-
-.property-select-multiple-colored-tag {
- width: 100%;
- display: flex;
- align-items: center;
-
- &__color-indicator {
- width: 12px;
- height: 12px;
- border-radius: 50%;
- border: none;
- margin-right: 8px;
- }
-}
-
-.resource-list-button-group,
-.invitees-list-button-group {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 20px;
-}
+ .app-sidebar,
+ .event-popover .popover__inner {
+ .app-sidebar-header__figure {
+ height: unset !important;
+ }
+
+ .property-text-location {
+ align-items: stretch !important;
+ position:relative;
+ textarea {
+ padding-right:27px;
+ &:not(:disabled) {
+ &:active,
+ &:hover,
+ &:focus {
+ border-color: var(--color-primary-element) !important;
+ }
+ }
+ }
+ .icon-externallink {
+ background-image: var(--icon-calendar-openlink-0075E0);
+ opacity: 1;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 2;
+ display: block;
+ width: 34px;
+ height: 100%;
+ line-height: 34px;
+ text-align: center;
+ cursor:pointer;
+ }
+ .icon-delete {
+ background-image: var(--icon-calendar-close-0075E0);
+ opacity: 1;
+ position: absolute;
+ top: 0;
+ right: 34px;
+ z-index: 2;
+ display: block;
+ width: 34px;
+ height: 100%;
+ line-height: 34px;
+ text-align: center;
+ cursor:pointer;
+ }
+
+ }
+ .multiselect__tags{
+ &:active,
+ &:hover,
+ &:focus {
+ border: 1px solid var(--color-primary-element) !important;
+ border-radius: 3px;
+ }
+
+ }
+ .app-sidebar-header__action {
+ margin-top: 0 !important;
+ max-height: none !important;
+ flex-wrap: wrap;
+
+ div {
+ flex-shrink: 0;
+ }
+ }
+
+ /** Hide the submit button for the title, because it does not trigger a save */
+ .app-sidebar-header__desc {
+ .app-sidebar-header__maintitle-form {
+ button {
+ display: none;
+ }
+ }
+ }
+
+ .editor-invitee-list-empty-message,
+ .editor-reminders-list-empty-message,
+ .editor-invitee-list-no-email-configured-message {
+ margin-top: 20px;
+
+ &__icon {
+ background-size: 50px;
+ height: 50px;
+ width: 50px;
+ margin: 0 auto;
+ opacity: 0.5;
+ }
+
+ &__caption {
+ margin-top: 8px;
+ text-align: center;
+ color: var(--color-text-lighter);
+ }
+ }
+
+ .editor-invitee-list-no-email-configured-message {
+ &__icon {
+ font-size: 50px;
+ line-height: 1em;
+ user-select: none;
+ }
+ }
+
+ .editor-reminders-list-new-button {
+ width: 100%;
+ background-position-x: 8px;
+ }
+
+ .app-sidebar-tab {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: unset !important;
+ max-height: unset !important;
+ height: auto !important;
+
+ &__buttons {
+ padding-top: 14px;
+ position: fixed;
+ bottom: 0px;
+ z-index: 2;
+ width: calc(27vw - 11px);
+ min-width: 300px - 11px;
+ max-width: 500px - 11px;
+ right: 10px;
+ background-color: var(--color-main-background);
+ padding-left: 22px;
+ padding-right: 22px;
+
+ button {
+ width: 100%;
+ height: 44px;
+ }
+ }
+ &__content {
+ margin-bottom: 120px;
+ }
+ }
+
+ .property-title-time-picker-loading-placeholder {
+ width: 100%;
+
+ &__icon {
+ margin: 0 auto;
+ height: 62px;
+ width: 62px;
+ background-size: 62px;
+ }
+ }
+
+ .app-sidebar__loading-indicator {
+ width: 100%;
+ margin-top: 20vh;
+
+ &__icon {
+ margin: 0 auto;
+ height: 44px;
+ width: 44px;
+ background-size: 44px;
+ }
+ }
+
+ .repeat-option-set {
+ .repeat-option-set-section {
+ &:not(:first-of-type) {
+ margin-top: 20px;
+ }
+
+ &--on-the-select {
+ display: flex;
+ align-items: center;
+
+ .multiselect {
+ width: 100%;
+ min-width: 100px !important; // Set a lower min-width
+ }
+ }
+
+ &__title {
+ list-style: none;
+ }
+
+ &__grid {
+ display: grid;
+ grid-gap: 0;
+ .primary{
+ background-color:var(--color-primary-element) !important;
+ color:var(--color-primary-text)!important;
+ }
+ .repeat-option-set-section-grid-item {
+ padding: 8px;
+ border: 1px solid var(--color-border-dark);
+ text-align: center;
+ margin: 0;
+ border-radius: 0;
+ background-color:#ffffff;
+ color:var(--color-primary-element);
+ }
+ }
+ }
+
+ &--weekly,
+ &--monthly {
+ .repeat-option-set-section {
+ &__grid {
+ grid-template-columns: repeat(7, auto);
+ }
+ }
+ }
+
+ &--yearly {
+ .repeat-option-set-section {
+ &__grid {
+ grid-template-columns: repeat(4, auto);
+ }
+ }
+ }
+
+ &--interval-freq {
+ display: flex;
+ align-items: center;
+
+ .multiselect,
+ input[type="number"] {
+ min-width: 100px;
+ width: 25%;
+ }
+ }
+
+ &--end {
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+
+ .repeat-option-end {
+ &__label,
+ &__end-type-select {
+ display: block;
+ min-width: 75px;
+ width: 25%;
+ }
+
+ &__until {
+ min-width: 75px;
+ width: 50%;
+ }
+
+ &__count {
+ min-width: 75px;
+ width: 25%;
+ }
+ }
+ }
+
+ &__label {
+ margin-right: auto;
+ }
+ }
+
+ .repeat-option-warning {
+ text-align: center;
+ }
+
+ .property-title-time-picker {
+ width: 100%;
+
+ &__time-pickers,
+ &__all-day {
+ display: flex;
+ align-items: center;
+ }
+
+ &__time-pickers {
+ justify-content: space-between;
+
+ .mx-datepicker {
+ width: 49%;
+
+ .mx-input-append {
+ background-color: transparent !important;
+ }
+ }
+
+ &--readonly {
+ .property-title-time-picker-read-only-wrapper {
+ display: flex;
+ align-items: center;
+ width: 50%;
+ margin: 3px 3px 3px 0;
+ padding: 8px 7px;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
+ outline: none;
+
+ &__icon {
+ margin-left: 8px;
+ height: 16px;
+ width: 16px;
+ opacity: 0.3;
+
+ &--highlighted {
+ opacity: 0.7;
+ }
+
+ &:focus,
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+
+ @media screen and (max-width: 1500px) {
+ &__time-pickers {
+ display: block;
+ }
+
+ .mx-datepicker {
+ width: 100%;
+ }
+
+ .property-title-time-picker-read-only-wrapper {
+ width: 100%;
+ }
+ }
+
+ &__all-day {
+ justify-content: flex-start;
+ }
+
+ .datetime-picker-inline-icon {
+ margin-top: 17px;
+ opacity: 0.3;
+ border: none;
+ background-color: transparent;
+ border-radius: 0;
+ padding: 6px !important;
+
+ &--highlighted {
+ opacity: 0.7;
+ }
+
+ &:focus,
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+
+ .property-alarm-list {
+ width: 100%;
+ }
+
+ .property-alarm-item {
+ display: flex;
+ align-items: center;
+ min-height: 44px;
+
+ &__icon {
+ align-self: flex-start;
+
+ &--hidden {
+ visibility: hidden;
+ }
+
+ .icon {
+ width: 34px;
+ height: 44px;
+ margin-left: -5px;
+ margin-right: 5px;
+ // TODO: enable me again if the other icons on the details tab have an opacity too
+ // opacity: .7;
+ }
+ }
+
+ &__label {
+ padding: 0 7px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ align-self: center;
+ }
+
+ &__options {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ }
+
+ &__edit {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ min-width: 0;
+ padding-right: 8px;
+
+ input[type="number"] {
+ width: 3em;
+ }
+
+ .multiselect {
+ flex: 1 auto;
+ height: 34px;
+ min-width: 0;
+ }
+
+ .mx-datepicker {
+ flex: 1 auto;
+ }
+
+ &--timed {
+ }
+
+ &--all-day {
+ flex-wrap: wrap;
+ margin-bottom: 5px;
+ gap: 0 5px;
+
+ &__distance,
+ &__time {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ }
+
+ &__distance {
+ .multiselect {
+ width: 6em;
+ }
+ }
+
+ &__time {
+ &__before-at-label {
+ flex: 0 0 auto;
+ margin-right: 5px;
+ }
+
+ .mx-datepicker {
+ width: 7em;
+ }
+ }
+ }
+
+ &--absolute {
+ .mx-datepicker {
+ width: unset;
+ }
+ }
+ }
+ }
+
+ .property-repeat {
+ width: 100%;
+
+ &__summary {
+ display: flex;
+ align-items: center;
+ margin-bottom: 5px;
+
+ &__icon {
+ width: 34px;
+ height: 34px;
+ margin-left: -5px;
+ margin-right: 5px;
+ }
+
+ &__content {
+ flex: 1 auto;
+ padding: 0 7px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ &__options {
+ margin-bottom: 5px;
+ }
+ }
+
+ .resource-search__multiselect,
+ .invitees-search__multiselect {
+ width: 100%;
+
+ .resource-search-list-item,
+ .invitees-search-list-item {
+ display: flex;
+ align-items: center;
+ width: 100%;
+
+ // Account for avatar width (because it is position: relative)
+ padding-right: 32px;
+
+ &__label {
+ width: 100%;
+ padding: 0 8px;
+
+ &__availability {
+ color: var(--color-text-maxcontrast);
+ }
+
+ div {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ div:nth-child(1) {
+ color: var(--color-main-text);
+ }
+
+ div:nth-child(2) {
+ color: var(--color-text-lighter);
+ line-height: 1;
+ }
+ }
+ }
+ }
+
+ .resource-list-item,
+ .invitees-list-item {
+ display: flex;
+ align-items: center;
+ min-height: 44px;
+
+ &__displayname {
+ margin-left: 8px;
+ }
+
+ &__actions {
+ margin-left: auto;
+ }
+
+ &__organizer-hint {
+ color: var(--color-text-maxcontrast);
+ font-weight: 300;
+ margin-left: 5px;
+ }
+ }
+
+ .resource-search {
+ &__capacity {
+ display: flex;
+ align-items: center;
+
+ &__actions {
+ margin-left: 5px;
+ }
+ }
+ }
+
+ .avatar-participation-status {
+ position: relative;
+ height: 38px;
+ width: 38px;
+
+ &__indicator {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background-size: 10px;
+ height: 15px;
+ width: 15px;
+ border-radius: 50%;
+ }
+
+ &__indicator.accepted {
+ background-color: #2fb130;
+ }
+
+ &__indicator.declined {
+ background-color: #ff0000;
+ }
+
+ &__indicator.tentative {
+ background-color: #ffa704;
+ }
+
+ &__indicator.delegated,
+ &__indicator.no-response {
+ background-color: grey;
+ }
+ }
+ .property-text,
+ .property-text-location,
+ .property-select,
+ .property-color,
+ .property-select-multiple,
+ .property-title,
+ .resource-capacity,
+ .resource-room-type {
+ display: flex;
+ width: 100%;
+ align-items: flex-start;
+ margin-bottom: 5px;
+
+ &__icon,
+ &__info {
+ height: 34px;
+ width: 34px;
+ }
+
+ &__icon {
+ &--hidden {
+ visibility: hidden;
+ }
+ }
+
+ &__info {
+ display: flex;
+ justify-content: center;
+ opacity: 0.5;
+ }
+
+ &__info:hover {
+ opacity: 1;
+ }
+
+ &__icon {
+ margin-left: -5px;
+ margin-right: 5px;
+ }
+
+ &__input {
+ flex-grow: 2;
+ textarea,
+ input,
+ div.multiselect {
+ width: 100%;
+ .multiselect__tags{
+ &:active,
+ &:hover,
+ &:focus {
+ border: 1px solid var(--color-primary-element);
+ border-radius: 3px;
+ }
+ }
+ }
+
+ textarea {
+ max-height: calc(100vh - 600px);
+ vertical-align: top;
+ margin: 0;
+ }
+
+ &--readonly {
+ div {
+ width: calc(100% - 8px); /* for typical (thin) scrollbar size */
+ white-space: pre-line;
+ margin: 3px 3px 3px 0;
+ padding: 8px 7px;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
+ outline: none;
+ overflow-y: scroll;
+ word-break: break-word; /* allows breaking on long URLs */
+ max-height: 30vh;
+ }
+
+ a.linkified {
+ text-decoration: underline;
+
+ &::after {
+ content: " ↗";
+ }
+ }
+ }
+
+ &--readonly-calendar-picker {
+ div.calendar-picker-option {
+ margin: 3px 3px 3px 0;
+ padding: 8px 7px;
+ }
+ }
+ }
+ }
+ .property-color {
+ &__input {
+ display: flex;
+ }
+
+ &__color-preview {
+ border-radius: var(--border-radius);
+ height: 34px !important;
+ width: 34px !important;
+ margin: 0;
+ }
+ }
+
+ .property-text {
+ &__input {
+ textarea {
+ resize: none;
+ &:not(:disabled) {
+ &:active,
+ &:hover,
+ &:focus {
+ border-color: var(--color-primary-element) !important;
+ }
+ }
+ }
+ }
+ }
+
+ .property-select-multiple {
+ .property-select-multiple__input.property-select-multiple__input--readonly {
+ width: 100%;
+
+ .property-select-multiple-colored-tag-wrapper {
+ align-items: center;
+ overflow: hidden;
+ max-width: 100%;
+ position: relative;
+ padding: 3px 5px;
+
+ .multiselect__tag {
+ line-height: 20px;
+ padding: 1px 5px;
+ background-image: none;
+ display: inline-flex;
+ align-items: center;
+ border-radius: 3px;
+ max-width: fit-content;
+ margin: 3px;
+ }
+ }
+ }
+ }
+
+ .property-title {
+ &__input,
+ &__input input {
+ font-size: 20px;
+ }
+ }
+
+ .resource-room-type {
+ margin-bottom: 5px;
+ }
+
+ .illustration-header {
+ max-height: 150px;
+ height: 150px;
+ width: 100%;
+ }
+
+ .illustration-header svg {
+ width: 100%;
+ height: 150px;
+ padding: 8px 8px 0 8px;
+ }
+ }
+
+ .timezone-popover-wrapper {
+ .popover__inner {
+ padding: 20px;
+ }
+
+ &__title {
+ margin-bottom: 8px;
+ }
+
+ &__timezone-select {
+ min-width: 200px;
+ }
+ }
+
+ .event-popover {
+ .popover__inner {
+ text-align: left;
+ max-width: 450px;
+ width: 450px;
+ padding: 5px 8px;
+
+ .property-text-location {
+ align-items: stretch !important;
+ position: relative;
+ }
+
+ .empty-content {
+ margin-top: 0 !important;
+ padding: 50px 0;
+ }
+
+ .illustration-header {
+ height: 100px;
+ overflow: hidden;
+ margin-bottom: 5px;
+ background-color: var(--color-background-dark);
+ // There is probably a more elegant solution for this
+ margin-top: -5px;
+ margin-left: -8px;
+ width: 466px;
+ border-top-left-radius: var(--border-radius);
+ border-top-right-radius: var(--border-radius);
+ }
+
+ .popover__inner {
+ max-width: unset !important;
+ }
+
+ .property-title-time-picker {
+ margin-bottom: 12px;
+ }
+
+ .event-popover__buttons {
+ margin-top: 8px;
+ display: flex;
+
+ button {
+ width: 100%;
+ }
+ }
+
+ .event-popover__top-right-actions {
+ position: absolute !important;
+ top: 0 !important;
+ right: 0 !important;
+ z-index: 100 !important;
+ opacity: 0.7 !important;
+ border-radius: 22px !important;
+
+ .action-item.action-item--single {
+ width: 44px !important;
+ height: 44px !important;
+ }
+ }
+
+ .popover-loading-indicator {
+ width: 100%;
+
+ &__icon {
+ margin: 0 auto;
+ height: 62px;
+ width: 62px;
+ background-size: 62px;
+ }
+ }
+ }
+
+ &[x-out-of-boundaries] {
+ margin-top: 75px;
+ }
+ }
+
+ .event-popover[x-placement^="bottom"] {
+ .popover__arrow {
+ border-bottom-color: var(--color-background-dark);
+ }
+ }
+
+ .calendar-picker-option {
+ display: flex;
+ align-items: center;
+
+ &__color-indicator {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: none;
+ margin-right: 8px;
+ flex-basis: 12px;
+ flex-shrink: 0;
+ }
+
+ &__label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-grow: 1;
+ }
+
+ &__avatar {
+ flex-basis: 18px;
+ flex-shrink: 0;
+ }
+ }
+
+ .property-select-multiple-colored-tag {
+ width: 100%;
+ display: flex;
+ align-items: center;
+
+ &__color-indicator {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: none;
+ margin-right: 8px;
+ }
+ }
+
+ .resource-list-button-group,
+ .invitees-list-button-group {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 20px;
+ }
diff --git a/css/icons.scss b/css/icons.scss
index dfc0e47e47e06de12ca4f33f6ddbd3d3efd22e8f..c5079fae7be6916efc039d078f64f2a91a27e75c 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -45,4 +45,5 @@
@include icon-black-white('view-week', 'calendar', 1);
@include icon-color('reminder', 'calendar', '#fffffe', 1);
@include icon-color('reminder', 'calendar', '#000001', 1);
-@include icon-color('openlink', 'calendar', '#0075E0', 1);
\ No newline at end of file
+@include icon-color('openlink', 'calendar', '#0075E0', 1);
+@include icon-color('close', 'calendar', '#0075E0', 1);
\ No newline at end of file
diff --git a/img/close.svg b/img/close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c265bd87edc56012f37ff8659b9b34e1a8f6f294
--- /dev/null
+++ b/img/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue
index 35941920feca7687bd20c5bfd63904f1d8e05208..a2ecdedafe23c022c7ce94cde28ef57039a828a5 100644
--- a/src/components/Editor/Invitees/InviteesList.vue
+++ b/src/components/Editor/Invitees/InviteesList.vue
@@ -178,6 +178,7 @@ export default {
timezoneId,
organizer: this.$store.getters.getCurrentUserPrincipal,
})
+ this.$emit('newattendeeadded', 'added')
},
removeAttendee(attendee) {
this.$store.commit('removeAttendee', {
diff --git a/src/components/Editor/Properties/PropertyTextLocation.vue b/src/components/Editor/Properties/PropertyTextLocation.vue
index b87b36d4929e354d4978e58e0511f94f38dd1dcf..0971756b18e38153b907f4e082777c2a6a6d1132 100644
--- a/src/components/Editor/Properties/PropertyTextLocation.vue
+++ b/src/components/Editor/Properties/PropertyTextLocation.vue
@@ -1,6 +1,13 @@
-
@@ -51,15 +58,36 @@ function isValidHttpUrl(string) {
}
return url.protocol === 'http:' || url.protocol === 'https:'
}
+/**
+ *
+ * @param length
+ * @param chars
+ */
+function generateRandomString(length, chars) {
+ let result = ''
+ for (let i = length; i > 0; --i) { result += chars[Math.floor(Math.random() * chars.length)] }
+ const todaynow = new Date()
+ result = result + todaynow.getDate() + todaynow.getMonth() + todaynow.getFullYear().toString().substr(-2)
+ return result
+}
+/**
+ *
+ */
+function JitsiUrlGenerator() {
+ let url = 'https://meet.jit.si/'
+ const charstr = '0123456789abcdefghijklmnopqrstuvwxyz'
+ const randomString = generateRandomString(8, charstr)
+ url = url + randomString
+ return url
+}
/**
* @param el
* @param binding
*/
function setVisibility(el, binding) {
- el.style.visibility = (binding.value === true) ? 'visible' : 'hidden'
+ el.style.visibility = binding.value === true ? 'visible' : 'hidden'
}
-
export default {
name: 'PropertyTextLocation',
directives: {
@@ -68,25 +96,25 @@ export default {
InformationVariant,
visible: {
bind(el, binding) {
- setVisibility(el, binding)
+ setVisibility(el, binding)
},
inserted(el, binding) {
- setVisibility(el, binding)
+ setVisibility(el, binding)
},
update(el, binding) {
- setVisibility(el, binding)
+ setVisibility(el, binding)
},
componentUpdated(el, binding) {
- setVisibility(el, binding)
+ setVisibility(el, binding)
},
-
},
},
- mixins: [
- PropertyMixin,
- ],
+ mixins: [PropertyMixin],
data: () => ({
- visibleValue: true,
+ visibleValue: false,
+ clearUrl: false,
+ vshow1: true,
+ vshow2: false,
}),
computed: {
display() {
@@ -112,22 +140,51 @@ export default {
},
},
mounted() {
- this.visibleValue = isValidHttpUrl(this.value)
+ this.vshow2 = this.visibleValue = this.clearUrl = isValidHttpUrl(this.value)
+ this.vshow1 = !this.vshow2
},
methods: {
changeValue(event) {
if (event.target.value.trim() === '') {
this.visibleValue = false
+ this.clearUrl = false
this.$emit('update:value', null)
} else {
- this.visibleValue = isValidHttpUrl(event.target.value.trim())
- this.$emit('update:value', event.target.value)
+ this.vshow2 = this.visibleValue = this.clearUrl = isValidHttpUrl(
+ event.target.value.trim()
+ )
+ this.vshow1 = !this.vshow2
+ this.$emit('update:value', event.target.value.trim())
}
},
goto() {
const urlval = this.value
window.open(urlval, '_blank').focus()
},
+ removeValue() {
+ this.visibleValue = false
+ this.clearUrl = false
+ this.$emit('update:value', null)
+ this.vshow2 = false
+ this.vshow1 = true
+ },
+ addJitsiUrl() {
+ if (typeof this.value !== 'string') {
+ this.$emit('update:value', JitsiUrlGenerator())
+ this.visibleValue = true
+ this.clearUrl = true
+ this.vshow2 = true
+ this.vshow1 = false
+ } else if (this.value === '') {
+ this.$emit('update:value', JitsiUrlGenerator())
+ this.visibleValue = true
+ this.clearUrl = true
+ this.vshow2 = true
+ this.vshow1 = false
+ } else {
+ this.visibleValue = this.clearUrl = isValidHttpUrl(this.value.trim())
+ }
+ },
},
}
diff --git a/src/mixins/PropertyMixin.js b/src/mixins/PropertyMixin.js
index ed6891d48f9291ea757ba0235e3540d5a5069359..455912250aaa8502bf5fe400823c0db0299b0750 100644
--- a/src/mixins/PropertyMixin.js
+++ b/src/mixins/PropertyMixin.js
@@ -37,6 +37,7 @@ import MapMarker from 'vue-material-design-icons/MapMarker.vue'
import Tag from 'vue-material-design-icons/Tag.vue'
import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline.vue'
import Bell from 'vue-material-design-icons/Bell.vue'
+import Video from 'vue-material-design-icons/Video.vue'
export default {
components: {
@@ -48,6 +49,7 @@ export default {
Tag,
TextBoxOutline,
Bell,
+ Video,
},
props: {
/**
@@ -93,6 +95,9 @@ export default {
icon() {
return this.propModel.icon || ''
},
+ iconOptional() {
+ return this.propModel.iconOptional || ''
+ },
/**
* Returns the placeholder text stored in the property-model
* If there is no placeholder text set, it returns an empty string
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index 487e490b2b495659d45c9b3a38fd8e5917bd34fd..bfd416115f2e5dda5e664e8b8315d0b6d5c271a0 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -51,6 +51,7 @@ const getRFCProperties = () => {
readableName: t('calendar', 'Location'),
placeholder: t('calendar', 'Add a location'),
icon: 'MapMarker',
+ iconOptional: 'Video',
tagPlaceholder: t('calendar', 'Open Link'),
},
/**
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index c961acd26d4517cd53dcd094af4faca53a64da29..5a588ede123af8608d5dd29089ecca32b496414a 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -122,7 +122,8 @@