From 515c2bca226c6b9763ac880ec125204ff4ab18c9 Mon Sep 17 00:00:00 2001 From: Yuriy Bakhtin Date: Thu, 9 Nov 2023 10:31:51 +0100 Subject: [PATCH 1/2] Restyle new message form --- resources/css/humhub.mail.css | 56 ++++++++++++++++++++++++++++--- resources/css/humhub.mail.less | 56 ++++++++++++++++++++++++++++--- resources/css/humhub.mail.min.css | 2 +- views/mail/conversation.php | 2 +- 4 files changed, 105 insertions(+), 11 deletions(-) diff --git a/resources/css/humhub.mail.css b/resources/css/humhub.mail.css index 25ab8e00..e0c65819 100644 --- a/resources/css/humhub.mail.css +++ b/resources/css/humhub.mail.css @@ -206,16 +206,64 @@ bottom: 0; width: 100%; padding: 10px; + background: #F3F3F3; } .mail-message-form .humhub-ui-richtext { padding-right: 105px; border-radius: 10px; } +.mail-message-form .content-create-input-group { + display: flex; + align-items: flex-end; +} +.mail-message-form .form-group { + flex-grow: 1; + flex-basis: min-content; +} +.mail-message-form .form-group .form-control { + padding-top: 5px; + padding-bottom: 5px; + line-height: 19px; + min-height: auto; +} +.mail-message-form .form-group .form-control:not(:focus) { + border-color: transparent; +} .mail-message-form .upload-buttons { - position: absolute; - right: 15px; - bottom: 15px; - z-index: 500; + white-space: nowrap; + padding-left: 7px; +} +.mail-message-form .upload-buttons .btn { + background: #D9D9D9; + border: none; + border-radius: 10px; + height: 33px; + padding: 0 9px; +} +.mail-message-form .upload-buttons .btn:hover, +.mail-message-form .upload-buttons .btn:focus { + background: #eee !important; +} +.mail-message-form .upload-buttons .btn:active { + background: #fff !important; +} +.mail-message-form .upload-buttons .btn .fa { + color: #666; + font-size: 15px; +} +.mail-message-form .upload-buttons .btn-group { + margin-right: 4px; +} +.mail-message-form .upload-buttons .btn-group span.btn { + padding: 8px; +} +.mail-message-form .upload-buttons .btn-group span.btn i.fa { + margin: 0; +} +.mail-message-form .upload-buttons .btn-group button.btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + color: #666 !important; } .mail-message-form .reply-button { margin-left: 0 !important; diff --git a/resources/css/humhub.mail.less b/resources/css/humhub.mail.less index b6cc312f..b5ff0cab 100644 --- a/resources/css/humhub.mail.less +++ b/resources/css/humhub.mail.less @@ -299,17 +299,63 @@ bottom: 0; width: 100%; padding: 10px; + background: #F3F3F3; .humhub-ui-richtext { padding-right: 105px; // For the upload and send button border-radius: @radius; } - + .content-create-input-group { + display: flex; + align-items: flex-end; + } + .form-group { + flex-grow: 1; + flex-basis: min-content; + .form-control { + padding-top: 5px; + padding-bottom: 5px; + line-height: 19px; + min-height: auto; + &:not(:focus) { + border-color: transparent; + } + } + } .upload-buttons { - position: absolute; - right: 15px; - bottom: 15px; - z-index: 500; + white-space: nowrap; + padding-left: 7px; + .btn { + background: #D9D9D9; + border: none; + border-radius: 10px; + height: 33px; + padding: 0 9px; + &:hover, &:focus { + background: #eee !important; + } + &:active { + background: #fff !important; + } + .fa { + color: #666; + font-size: 15px; + } + } + .btn-group { + margin-right: 4px; + span.btn { + padding: 8px; + i.fa { + margin: 0; + } + } + button.btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + color: #666 !important; + } + } } .reply-button { diff --git a/resources/css/humhub.mail.min.css b/resources/css/humhub.mail.min.css index 8b4c68d0..7ed2d5e4 100644 --- a/resources/css/humhub.mail.min.css +++ b/resources/css/humhub.mail.min.css @@ -1 +1 @@ -.placeholder{color:#77777a}#dropdown-messages .dropdown-header{color:#000;margin-bottom:12px;font-weight:600}#dropdown-messages .dropdown-footer .btn.btn-default{border:1px solid var(--default);box-shadow:none}#dropdown-messages .dropdown-footer .btn.btn-default:hover{border-color:var(--background3);background:var(--background3)}#dropdown-messages .dropdown-footer .btn.btn-default:active{border-color:var(--text-color-secondary);background:#fff}#dropdown-messages.dropdown-menu li a{font-size:inherit!important}#dropdown-messages .media-body{font-weight:200}.modal-body #createmessage-message .ProseMirror{min-height:100px!important}.media-list li.new{background-color:#e9f9ff}#create-message-button .fa,#mail-conversation-create-button .fa{margin:0}#conversation-filter-link{padding-left:0;display:block;padding-bottom:0}#conversation-tags-root{border-bottom:1px solid #eee}#conversation-tags-root .my-tags-label{padding-right:10px}.conversation-menu{display:none}.conversation-menu .time{color:inherit;text-transform:none}.conversation-menu .badge{background-color:var(--background-color-secondary);border-radius:10px;color:inherit}.conversation-menu .conversation-edit-button{background-color:var(--background-color-secondary);border-radius:50%;color:inherit}.conversation-menu .conversation-edit-button:hover{background-color:var(--background-color-secondary);color:inherit}.visible-xs .conversation-menu{padding-left:35px}.visible-xs .conversation-menu .conversation-menu-item{margin-bottom:10px}.conversation-menu-item{margin-left:5px}.conversation-menu-item a{cursor:pointer}.conversation-edit-button{border-bottom-right-radius:0;border-top-right-radius:0}.conversation-scroll-down-button{position:absolute;bottom:58px;right:25px;width:38px;height:38px;background:#fff;border-radius:50%;box-shadow:1px 1px 2px #999}.conversation-scroll-down-button .fa{font-size:26px;margin:7px 0 0 11px}.conversation-entry-list{max-height:600px;min-height:150px;overflow:auto}.conversation-entry-list .media{padding-right:5px}.conversation-entry-content{display:table;float:left;background-color:var(--background-color-secondary);border-radius:10px;padding:10px;max-width:70%}.conversation-entry-content pre{max-width:485px}.conversation-entry-content.own{float:right;background:var(--background-color-highlight)}.conversation-entry-content .markdown-render{float:left;width:100%;min-width:230px}.conversation-blocked-recipient{-webkit-filter:grayscale(100%);filter:grayscale(100%)}#mail-conversation-root hr{border-top:1px solid #eee}#mail-conversation-root .ProsemirrorEditor.focusMenu .ProseMirror-menubar{margin-top:0}#mail-conversation-root .panel-body{margin-bottom:0}#mail-conversation-header{padding:18px;border-bottom:1px solid var(--background3);border-bottom-left-radius:0;border-bottom-right-radius:0}#mail-conversation-header h1{font-weight:600;font-size:22px;display:inline-block}#mail-conversation-header small{display:block;font-size:11px;font-weight:400}#mail-conversation-header small a{color:var(--text-color-main)}#conversation-settings-button{padding:6px;font-size:12px}#mail-filter-root{margin-top:5px}.mail-inbox-messages .panel-heading>a{font-weight:600}.mail-inbox-messages .panel-heading #mail-filter-root>a{font-weight:400}.mail-inbox-messages .media{margin-top:0;display:flex}.mail-inbox-messages .media h4.media-heading{font-weight:600}.mail-inbox-messages .media h4.media-heading time{font-weight:400;float:right}.mail-inbox-messages .media h5{font-size:11px;font-weight:500;color:#000;display:flex;justify-content:space-between}.mail-inbox-messages .media h5 span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-inbox-messages .media .mail-last-entry{font-size:11px;font-weight:400;color:var(--text-color-soft2)}.mail-inbox-messages .media-list>li:hover .mail-last-entry,.mail-inbox-messages .selected .mail-last-entry{color:var(--text-color-main)}.mail-message-form{position:absolute;bottom:0;width:100%;padding:10px}.mail-message-form .humhub-ui-richtext{padding-right:105px;border-radius:10px}.mail-message-form .upload-buttons{position:absolute;right:15px;bottom:15px;z-index:500}.mail-message-form .reply-button{margin-left:0!important}.mail-message-form .help-block{margin:0}.mail-message-form .alert{margin-bottom:0}.mail-conversation-entry{margin-top:3px;position:relative}.mail-conversation-entry .author-image .img-user{max-width:100%}.mail-conversation-entry .author-label{font-size:10px;font-weight:600}.mail-conversation-entry.hideUserInfo .author-label{display:none}.mail-conversation-entry.hideUserInfo .author-image img{visibility:hidden;margin-top:0}.mail-conversation-entry.own .conversation-menu-item{float:right;margin-left:0;margin-right:5px}.mail-conversation-entry .conversation-entry-time{float:right;font-size:10px;color:var(--text-color-main)}.mail-conversation-entry .conversation-entry-time>span{font-style:italic}.conversation-entry-badge{padding:10px 0 8px;text-align:center}.conversation-entry-badge span{display:inline-block;box-shadow:1px 1px 3px rgba(0,0,0,.3);border-radius:7px;padding:5px 20px}.conversation-entry-badge.conversation-date-badge span{text-transform:uppercase}#inbox{max-height:500px;overflow:auto;border-radius:4px}.messagePreviewEntry{cursor:pointer}.messagePreviewEntry time{font-size:10px;color:var(--text-color-secondary)}.messagePreviewEntry .new-message-badge{display:none}.messagePreviewEntry.unread .new-message-badge{display:block}.messagePreviewEntry.unread time{color:var(--info)}.messagePreviewEntry.unread .mail-last-entry{color:var(--text-color-main)}.message-tag-filter-group .select2-selection{border-bottom-right-radius:0}.message-tag-filter-group .manage-tags-link{font-weight:600;font-size:.8em;border:1px solid #ededed;border-top:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:2px 5px}.new-message-badge{float:right;min-width:16px;height:16px;border-radius:50%;background:var(--info);margin-left:2px}.inbox-entry-title{font-weight:600}.field-replyform-message{margin:0}@media (max-width:991px){#inbox{max-height:500px!important}}@media (max-width:767px){#dropdown-messages{width:300px!important}.arrow{margin-left:-101px!important}#inbox{max-height:none!important}.mail-conversation-single-message #inbox{max-height:none!important}.mail-conversation-single-message .inbox-wrapper{display:none}.conversation-entry-content pre{max-width:245px;padding:0}} \ No newline at end of file +.placeholder{color:#77777a}#dropdown-messages .dropdown-header{color:#000;margin-bottom:12px;font-weight:600}#dropdown-messages .dropdown-footer .btn.btn-default{border:1px solid var(--default);box-shadow:none}#dropdown-messages .dropdown-footer .btn.btn-default:hover{border-color:var(--background3);background:var(--background3)}#dropdown-messages .dropdown-footer .btn.btn-default:active{border-color:var(--text-color-secondary);background:#fff}#dropdown-messages.dropdown-menu li a{font-size:inherit!important}#dropdown-messages .media-body{font-weight:200}.modal-body #createmessage-message .ProseMirror{min-height:100px!important}.media-list li.new{background-color:#e9f9ff}#create-message-button .fa,#mail-conversation-create-button .fa{margin:0}#conversation-filter-link{padding-left:0;display:block;padding-bottom:0}#conversation-tags-root{border-bottom:1px solid #eee}#conversation-tags-root .my-tags-label{padding-right:10px}.conversation-menu{display:none}.conversation-menu .time{color:inherit;text-transform:none}.conversation-menu .badge{background-color:var(--background-color-secondary);border-radius:10px;color:inherit}.conversation-menu .conversation-edit-button{background-color:var(--background-color-secondary);border-radius:50%;color:inherit}.conversation-menu .conversation-edit-button:hover{background-color:var(--background-color-secondary);color:inherit}.visible-xs .conversation-menu{padding-left:35px}.visible-xs .conversation-menu .conversation-menu-item{margin-bottom:10px}.conversation-menu-item{margin-left:5px}.conversation-menu-item a{cursor:pointer}.conversation-edit-button{border-bottom-right-radius:0;border-top-right-radius:0}.conversation-scroll-down-button{position:absolute;bottom:58px;right:25px;width:38px;height:38px;background:#fff;border-radius:50%;box-shadow:1px 1px 2px #999}.conversation-scroll-down-button .fa{font-size:26px;margin:7px 0 0 11px}.conversation-entry-list{max-height:600px;min-height:150px;overflow:auto}.conversation-entry-list .media{padding-right:5px}.conversation-entry-content{display:table;float:left;background-color:var(--background-color-secondary);border-radius:10px;padding:10px;max-width:70%}.conversation-entry-content pre{max-width:485px}.conversation-entry-content.own{float:right;background:var(--background-color-highlight)}.conversation-entry-content .markdown-render{float:left;width:100%;min-width:230px}.conversation-blocked-recipient{-webkit-filter:grayscale(100%);filter:grayscale(100%)}#mail-conversation-root hr{border-top:1px solid #eee}#mail-conversation-root .ProsemirrorEditor.focusMenu .ProseMirror-menubar{margin-top:0}#mail-conversation-root .panel-body{margin-bottom:0}#mail-conversation-header{padding:18px;border-bottom:1px solid var(--background3);border-bottom-left-radius:0;border-bottom-right-radius:0}#mail-conversation-header h1{font-weight:600;font-size:22px;display:inline-block}#mail-conversation-header small{display:block;font-size:11px;font-weight:400}#mail-conversation-header small a{color:var(--text-color-main)}#conversation-settings-button{padding:6px;font-size:12px}#mail-filter-root{margin-top:5px}.mail-inbox-messages .panel-heading>a{font-weight:600}.mail-inbox-messages .panel-heading #mail-filter-root>a{font-weight:400}.mail-inbox-messages .media{margin-top:0;display:flex}.mail-inbox-messages .media h4.media-heading{font-weight:600}.mail-inbox-messages .media h4.media-heading time{font-weight:400;float:right}.mail-inbox-messages .media h5{font-size:11px;font-weight:500;color:#000;display:flex;justify-content:space-between}.mail-inbox-messages .media h5 span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-inbox-messages .media .mail-last-entry{font-size:11px;font-weight:400;color:var(--text-color-soft2)}.mail-inbox-messages .media-list>li:hover .mail-last-entry,.mail-inbox-messages .selected .mail-last-entry{color:var(--text-color-main)}.mail-message-form{position:absolute;bottom:0;width:100%;padding:10px;background:#f3f3f3}.mail-message-form .humhub-ui-richtext{padding-right:105px;border-radius:10px}.mail-message-form .content-create-input-group{display:flex;align-items:flex-end}.mail-message-form .form-group{flex-grow:1;flex-basis:min-content}.mail-message-form .form-group .form-control{padding-top:5px;padding-bottom:5px;line-height:19px;min-height:auto}.mail-message-form .form-group .form-control:not(:focus){border-color:transparent}.mail-message-form .upload-buttons{white-space:nowrap;padding-left:7px}.mail-message-form .upload-buttons .btn{background:#d9d9d9;border:none;border-radius:10px;height:33px;padding:0 9px}.mail-message-form .upload-buttons .btn:focus,.mail-message-form .upload-buttons .btn:hover{background:#eee!important}.mail-message-form .upload-buttons .btn:active{background:#fff!important}.mail-message-form .upload-buttons .btn .fa{color:#666;font-size:15px}.mail-message-form .upload-buttons .btn-group{margin-right:4px}.mail-message-form .upload-buttons .btn-group span.btn{padding:8px}.mail-message-form .upload-buttons .btn-group span.btn i.fa{margin:0}.mail-message-form .upload-buttons .btn-group button.btn{border-top-left-radius:0;border-bottom-left-radius:0;color:#666!important}.mail-message-form .reply-button{margin-left:0!important}.mail-message-form .help-block{margin:0}.mail-message-form .alert{margin-bottom:0}.mail-conversation-entry{margin-top:3px;position:relative}.mail-conversation-entry .author-image .img-user{max-width:100%}.mail-conversation-entry .author-label{font-size:10px;font-weight:600}.mail-conversation-entry.hideUserInfo .author-label{display:none}.mail-conversation-entry.hideUserInfo .author-image img{visibility:hidden;margin-top:0}.mail-conversation-entry.own .conversation-menu-item{float:right;margin-left:0;margin-right:5px}.mail-conversation-entry .conversation-entry-time{float:right;font-size:10px;color:var(--text-color-main)}.mail-conversation-entry .conversation-entry-time>span{font-style:italic}.conversation-entry-badge{padding:10px 0 8px;text-align:center}.conversation-entry-badge span{display:inline-block;box-shadow:1px 1px 3px rgba(0,0,0,.3);border-radius:7px;padding:5px 20px}.conversation-entry-badge.conversation-date-badge span{text-transform:uppercase}#inbox{max-height:500px;overflow:auto;border-radius:4px}.messagePreviewEntry{cursor:pointer}.messagePreviewEntry time{font-size:10px;color:var(--text-color-secondary)}.messagePreviewEntry .new-message-badge{display:none}.messagePreviewEntry.unread .new-message-badge{display:block}.messagePreviewEntry.unread time{color:var(--info)}.messagePreviewEntry.unread .mail-last-entry{color:var(--text-color-main)}.message-tag-filter-group .select2-selection{border-bottom-right-radius:0}.message-tag-filter-group .manage-tags-link{font-weight:600;font-size:.8em;border:1px solid #ededed;border-top:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:2px 5px}.new-message-badge{float:right;min-width:16px;height:16px;border-radius:50%;background:var(--info);margin-left:2px}.inbox-entry-title{font-weight:600}.field-replyform-message{margin:0}@media (max-width:991px){#inbox{max-height:500px!important}}@media (max-width:767px){#dropdown-messages{width:300px!important}.arrow{margin-left:-101px!important}#inbox{max-height:none!important}.mail-conversation-single-message #inbox{max-height:none!important}.mail-conversation-single-message .inbox-wrapper{display:none}.conversation-entry-content pre{max-width:245px;padding:0}} \ No newline at end of file diff --git a/views/mail/conversation.php b/views/mail/conversation.php index d15514ec..d6b8ac6b 100644 --- a/views/mail/conversation.php +++ b/views/mail/conversation.php @@ -85,7 +85,7 @@ ->cssClass('reply-button') ->submit() ->action('reply', $replyForm->getUrl()) - ->icon('paper-plane-o') + ->icon('paper-plane') ->sm() ?> From 184db76bbe96159251c43d6909d71d21b65bde05 Mon Sep 17 00:00:00 2001 From: Yuriy Bakhtin Date: Thu, 9 Nov 2023 10:34:15 +0100 Subject: [PATCH 2/2] Update CHANGELOG.md --- docs/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 8cbb9171..3c76190e 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -7,6 +7,7 @@ Changelog - Fix #354: Don't display date badge twice after update a message - Fix #356: Fix visibility of the method `Controller::getAccessRules()` - Fix #358: Fix sending email notification to deleted users +- Enh #360: Restyle new message form 3.1.1 (September 19, 2023) ---------------------------