comand-component-library 4.2.10 → 4.2.12

package/src/components/CmdLoginForm.vue

@@ -12,7 +12,7 @@
         <!-- end CmdHeadline -->
 
         <!-- begin Google-Login-Button -->
-        <button v-if="enableLoginWithGoogle" class="gsi-material-button">
+        <button v-if="enableLoginWithGoogle" class="gsi-material-button stretch-on-small-devices">
             <div class="gsi-material-button-state"></div>
             <div class="gsi-material-button-content-wrapper">
                 <div class="gsi-material-button-icon">
@@ -37,7 +37,7 @@
 
         <!-- begin Facebook-Login-Button -->
         <div v-if="enableLoginWithFacebook"
-             class="fb-login-button"
+             class="fb-login-button stretch-on-small-devices"
              data-width="200"
              data-size=""
              data-button-type=""
@@ -47,8 +47,19 @@
         </div>
         <!-- end Facebook-Login-Button -->
 
-        <button v-if="enableLoginWithGoogle || enableLoginWithFacebook" @click.prevent="showLogin = true">
-            <span>Login with your data</span>
+        <button v-if="enableLoginWithGoogle || enableLoginWithFacebook"
+                class="button stretch-on-small-devices"
+                v-bind="buttonLoginWithYourDataDefaultOptions"
+                @click.prevent="showLogin = true">
+                <!-- begin CmdIcon -->
+                <CmdIcon
+                    v-if="buttonLoginWithYourDataDefaultOptions.icon?.iconClass"
+                    :iconClass="buttonLoginWithYourDataDefaultOptions.icon.iconClass"
+                    :type="buttonLoginWithYourDataDefaultOptions.icon.iconType"
+                    :title="buttonLoginWithYourDataDefaultOptions.icon.tooltip"
+                />
+                <!-- end CmdIcon -->
+                <span v-if="buttonLoginWithYourDataDefaultOptions.text">{{ buttonLoginWithYourDataDefaultOptions.text }}</span>
         </button>
 
         <!-- begin form elements -->
@@ -81,14 +92,15 @@
         <!-- end named slot for login-form -->
 
         <div class="option-wrapper flex-container">
-            <template v-if="linkForgotPassword || linkCreateAccount">
+            <div class="flex-container reset-flex no-wrap-on-small-devices justify-content-space-around" v-if="linkForgotPassword || linkCreateAccount">
                 <!-- begin link for 'forgot password' -->
                 <a v-if="linkForgotPassword" href="#" @click.prevent="toggleSendLoginView">
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="linkForgotPassword.icon?.show && linkForgotPassword.icon?.iconClass"
-                             :iconClass="linkForgotPassword.icon.iconClass"
-                             :type="linkForgotPassword.icon.iconType"
-                             :title="linkForgotPassword.icon.tooltip"
+                    <CmdIcon
+                        v-if="linkForgotPassword.icon?.show && linkForgotPassword.icon?.iconClass"
+                        :iconClass="linkForgotPassword.icon.iconClass"
+                        :type="linkForgotPassword.icon.iconType"
+                        :title="linkForgotPassword.icon.tooltip"
                     />
                     <!-- end CmdIcon -->
                     <span v-if="linkForgotPassword.text">{{ linkForgotPassword.text }}</span>
@@ -111,14 +123,14 @@
                     <!-- end CmdLink -->
                 </template>
                 <!-- end link for 'create account' -->
-            </template>
+            </div>
 
             <!-- begin link-type 'button' -->
             <button
                 v-if="buttonLoginDefaultOptions.linkType === 'button'"
                 :type="buttonLoginDefaultOptions.type === 'submit' ? 'submit' : 'button'"
                 v-bind="buttonLoginOptions"
-                :class="['button', { primary: buttonLoginDefaultOptions.primary }]"
+                :class="['button stretch-on-small-devices', { primary: buttonLoginDefaultOptions.primary }]"
                 @click="onClick"
                 :disabled="buttonLoginDisabled"
             >
@@ -185,7 +197,7 @@
                 v-if="buttonSendLoginOptions.linkType === 'button'"
                 v-bind="buttonSendLoginOptions"
                 :type="buttonSendLoginOptions.type === 'submit' ? 'submit' : 'button'"
-                :class="['button', { primary: buttonSendLoginOptions.primary }]"
+                :class="['button stretch-on-small-devices', { primary: buttonSendLoginOptions.primary }]"
                 :disabled="buttonSendLoginDisabled"
             >
                 <!-- begin CmdIcon -->
@@ -393,6 +405,15 @@ export default {
                 }
             }
         },
+        /**
+         * button to show login if multiple login possibilities (i.e. google, facebook) are enabled
+         *
+         * @requiredForAccessibility: partial
+         */
+        buttonLoginWithYourData: {
+            type: Object,
+            required: false
+        },
         /**
          * button to login
          *
@@ -446,6 +467,16 @@ export default {
                 ...this.cmdFormElementSendLogin
             }
         },
+        buttonLoginWithYourDataDefaultOptions() {
+            return {
+                linkType: "button", /* href, router, button */
+                type: "button", /* submit, button */
+                path: "",
+                text: "Login with your data",
+                primary: false,
+                ...this.buttonLoginWithYourData
+            }
+        },
         buttonLoginDefaultOptions() {
             return {
                 linkType: "button", /* href, router, button */
@@ -612,68 +643,66 @@ export default {
         background-color: var(--color-white);
         height: var(--input-height);
         padding: var(--button-padding);
-    }
 
-    .gsi-material-button .gsi-material-button-icon {
-        height: 2rem;
-        aspect-ratio: 1/1;
-        margin-right: calc(var(--default-margin) / 2);
-    }
+        .gsi-material-button-icon {
+            height: 2rem;
+            aspect-ratio: 1/1;
+            margin-right: calc(var(--default-margin) / 2);
+        }
 
-    .gsi-material-button .gsi-material-button-content-wrapper {
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        height: 100%;
-        justify-content: space-between;
-        position: relative;
-        width: 100%;
-    }
+        .gsi-material-button-content-wrapper {
+            align-items: center;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            height: 100%;
+            justify-content: space-between;
+            position: relative;
+            width: 100%;
+        }
 
-    .gsi-material-button .gsi-material-button-contents {
-        flex-grow: 1;
-        font-family: 'Roboto', arial, sans-serif;
-        font-weight: 500;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: top;
-    }
+        .gsi-material-button-contents {
+            flex-grow: 1;
+            font-family: 'Roboto', arial, sans-serif;
+            font-weight: 500;
+            text-overflow: ellipsis;
+            vertical-align: top;
+        }
 
-    .gsi-material-button .gsi-material-button-state {
-        transition: opacity .218s;
-        bottom: 0;
-        left: 0;
-        opacity: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
+        .gsi-material-button-state {
+            transition: opacity .218s;
+            bottom: 0;
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
 
-    .gsi-material-button:disabled {
-        background-color: #ffffff61;
-        border-color: #1f1f1f1f;
-    }
+        .gsi-material-button:disabled {
+            background-color: #ffffff61;
+            border-color: #1f1f1f1f;
 
-    .gsi-material-button:disabled {
-        .gsi-material-button-contents, .gsi-material-button-icon {
-            opacity: 38%;
-        }
-    }
+            .gsi-material-button-contents, .gsi-material-button-icon {
+                opacity: 38%;
+            }
 
-    .gsi-material-button:not(:disabled):is(:active, :focus) .gsi-material-button-state {
-        background-color: #303030;
-        opacity: 12%;
-    }
+            &:not(:disabled):is(:active, :focus) .gsi-material-button-state {
+                background-color: #303030;
+                opacity: 12%;
+            }
 
-    .gsi-material-button:not(:disabled):hover {
-        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+            &:not(:disabled):hover {
+                box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
 
-        .gsi-material-button-state {
-            background-color: #303030;
-            opacity: 8%;
+                .gsi-material-button-state {
+                    background-color: #303030;
+                    opacity: 8%;
+                }
+            }
         }
     }
+
     /* end google-login-button */
 }
 

package/src/components/CmdMailTool.vue

@@ -142,10 +142,4 @@ export default {
         }
     }
 }
-</script>
-
-<style>
-.cmd-mail-tool {
-
-}
-</style>
+</script>

package/src/components/CmdMailToolEntry.vue

@@ -7,12 +7,12 @@
             :title="getMessage('mail_tool_entry.tooltip.read_this_mail')"
         >
             <dl class="no-flex">
-                <dt class="flex-container align-items-center">
+                <dt class="flex-container">
                     {{
                         boxType === "inbox" ? getMessage("mail_tool_entry.description_label.from") : getMessage("mail_tool_entry.description_label.to")
                     }}
                 </dt>
-                <dd class="sender-receiver-wrapper flex-container align-items-center no-flex">
+                <dd class="sender-receiver-wrapper flex-container no-wrap-on-small-devices align-items-center no-flex">
                     <!-- begin CmdImage for contact image -->
                     <CmdImage v-if="mail.cmdImage?.src"
                               :src="mail.cmdImage.src"
@@ -25,15 +25,15 @@
                 <dt>{{ getMessage("mail_tool_entry.description_label.subject") }}</dt>
                 <dd><a href="#" @click.prevent="readMail(mail.id)">{{ mail.subject }}</a></dd>
             </dl>
-            <div class="flex-container vertical no-flex">
+            <div class="flex-container received-and-options-wrapper no-wrap-on-small-devices">
                 <dl class="no-list-items date-time-wrapper">
-                    <dt>Received:</dt>
-                    <dd>
+                    <dt>{{ getMessage("mail_tool_entry.description_label.received") }}</dt>
+                    <dd class="flex-container no-wrap-on-small-devices">
                         <time :datetime="mail.isoDate">{{ mailFormatDate(mail.isoDate) }}</time>
                         <time :datetime="mail.time">{{ mailFormatTime(mail.time) }}</time>
                     </dd>
                 </dl>
-                <div class="options-wrapper flex-container no-flex">
+                <div class="options-wrapper flex-container no-wrap-on-small-devices no-flex">
                     <a href="#" @click.prevent="deleteMail(mail.id)" title="Delete this mail">
                         <span class="icon-delete"></span>
                     </a>
@@ -208,6 +208,11 @@ export default {
     dl {
         margin: 0;
 
+        dt {
+            align-items: center;
+            justify-content: flex-start;
+        }
+
         dd {
             gap: calc(var(--default-gap) / 2);
         }
@@ -224,7 +229,47 @@ export default {
     .options-wrapper {
         justify-content: flex-end;
     }
+
+    .sender-receiver-wrapper {
+        justify-content: flex-start !important;
+    }
+
+    .received-and-options-wrapper {
+        flex-direction: column;
+        flex: none;
+
+        .date-time-wrapper {
+            time {
+                flex: none;
+            }
+        }
+
+        .options-wrapper {
+            margin-left: auto;
+        }
+    }
 }
+</style>
+
+<style lang="scss">
+@import "../assets/styles/variables";
+
+
+@media only screen and (max-width: $small-max-width) {
+    .cmd-mail-tool-entry {
+        dl {
+
+            dt {
+                align-items: flex-start;
+                justify-content: center;
+            }
+        }
 
+        .received-and-options-wrapper {
+            flex-direction: row;
+            justify-content: space-between;
+        }
+    }
+}
 /* end cmd-mail-tool-entry -------------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdMailToolFilter.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="cmd-mail-tool-filter align-items-center">
+    <div class="cmd-mail-tool-filter">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="headlineText" :headlineText="headlineText" :headlineLevel="headlineLevel"/>
         <!-- end CmdHeadline -->
 
-        <div class="flex-container horizontal align-items-center">
+        <div class="flex-container align-items-center">
             <!-- begin CmdFormElement -->
             <CmdFormElement
                 element="input"
@@ -18,31 +18,33 @@
             />
             <!-- end CmdFormElement -->
 
-            <!-- begin CmdFormElement -->
-            <CmdFormElement
-                element="input"
-                type="checkbox"
-                name="search-filters"
-                id="search-subject"
-                labelText="Search subjects"
-                v-model="searchFilterOptions"
-                inputValue="subjects"
-            />
-            <!-- end CmdFormElement -->
+            <div class="flex-container reset-flex">
+                <!-- begin CmdFormElement -->
+                <CmdFormElement
+                    element="input"
+                    type="checkbox"
+                    name="search-filters"
+                    id="search-subject"
+                    labelText="Search subjects"
+                    v-model="searchFilterOptions"
+                    inputValue="subjects"
+                />
+                <!-- end CmdFormElement -->
 
-            <!-- begin CmdFormElement -->
-            <CmdFormElement
-                element="input"
-                type="checkbox"
-                name="search-filters"
-                :id="'search-' + senderReceiver"
-                :labelText="'Search ' + senderReceiver"
-                v-model="searchFilterOptions"
-                :inputValue="senderReceiver"
-            />
-            <!-- end CmdFormElement -->
+                <!-- begin CmdFormElement -->
+                <CmdFormElement
+                    element="input"
+                    type="checkbox"
+                    name="search-filters"
+                    :id="'search-' + senderReceiver"
+                    :labelText="'Search ' + senderReceiver"
+                    v-model="searchFilterOptions"
+                    :inputValue="senderReceiver"
+                />
+                <!-- end CmdFormElement -->
+            </div>
         </div>
-        <div class="flex-container horizontal sort-wrapper">
+        <div class="flex-container sort-wrapper">
             <!-- begin link sort ascending -->
             <a v-if="sortOrderAsc" href="#" @click.prevent="sortByDate('asc')" :title="linkSortAscending.title">
                 <span v-if="linkSortAscending.text">{{ linkSortAscending.text }}</span>
@@ -188,15 +190,19 @@ export default {
     display: flex;
     padding: var(--default-padding);
     background: var(--color-light-gray);
-
-    & > * {
-        flex: 1;
-    }
+    align-items: center;
+    justify-content: space-between;
 
     .cmd-headline {
         margin: 0;
     }
 
+    .label-text {
+        white-space: nowrap;
+
+
+    }
+
     .sort-wrapper {
         text-align: right;