Some work on jquery-ui dialogs and some other small improvements

pull/5742/merge
Aleksander Machniak 7 years ago
parent 78e43cf4a6
commit 10d0480d6c

@ -53,3 +53,10 @@
// Drag-n-drop layer
@color-drag-layer: white;
@color-drag-layer-background: #444;
// Dialogs
@color-dialog-overlay-background: #333;
@color-spinner-circle: #eee;
@color-spinner-item: #666;

@ -161,6 +161,10 @@ html.iframe body {
#content {
height: 100%;
}
.frame-content {
padding: 1rem;
}
}

@ -9,8 +9,8 @@
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@import (reference) "fontawesome.less";
@import (reference) "colors.less";
@import (reference) "fontawesome";
@import (reference) "colors";
/*** Fonts ***/
@ -76,7 +76,7 @@ button, input, select, textarea {
line-height: initial;
}
@import "layout.less";
@import "layout";
/*** Font-icons ***/
@ -194,8 +194,9 @@ button, input, select, textarea {
height: 5rem;
overflow: hidden;
text-indent: -999em;
border: .5em solid;
border-color: currentColor transparent currentColor currentColor;
color: @color-spinner-circle;
border: 1rem solid;
border-color: currentColor @color-spinner-item currentColor currentColor;
border-radius: 50%;
animation-name: fa-spin;
animation-duration: 1s;
@ -206,16 +207,17 @@ button, input, select, textarea {
/*** Widgets ***/
@import "widgets/buttons.less";
@import "widgets/dialogs.less";
@import "widgets/taskmenu.less";
@import "widgets/messages.less";
@import "widgets/toolbar.less";
@import "widgets/searchbar.less";
@import "widgets/lists.less";
@import "widgets/forms.less";
@import "widgets/messagebody.less";
@import "widgets/googiespell.less";
@import "widgets/buttons";
@import "widgets/jqueryui";
@import "widgets/dialogs";
@import "widgets/taskmenu";
@import "widgets/messages";
@import "widgets/toolbar";
@import "widgets/searchbar";
@import "widgets/lists";
@import "widgets/forms";
@import "widgets/messagebody";
@import "widgets/googiespell";

@ -9,7 +9,7 @@
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Dialogs ***/
/*** Dialogs and popovers ***/
.popupmenu {
display: none;
@ -21,25 +21,13 @@
}
}
div.ui-dialog-content > .popupmenu,
div.popover-body > .popupmenu {
display: block !important;
}
.ui-dialog iframe {
width: 100%;
height: 100%;
border: 0;
}
.ui-dialog-content.iframe {
padding: 0 !important;
overflow: hidden !important;
}
div.popover-body {
padding: 0;
overflow-x: hidden;
& > .popupmenu {
display: block !important;
}
}
.popover {

@ -0,0 +1,118 @@
/**
* Roundcube webmail styles for the Elastic skin
*
* Copyright (c) 2017, The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original autors in the README file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** jQuery-UI widgets' style overrides ***/
.ui-widget-overlay {
background-color: @color-dialog-overlay-background;
}
.ui-dialog {
.ui-dialog-titlebar {
height: 4rem;
border-bottom: 1px solid lightgrey; /* TODO: var */
}
.ui-dialog-title {
line-height: 4rem;
font-size: 1.25rem;
padding: 0 3rem 0 1rem;
}
.ui-dialog-titlebar-close {
border: 0;
background: transparent;
color: grey; /* TODO: var */
right: 0;
top: 0;
position: absolute;
height: 4rem;
cursor: pointer;
&:before {
&:extend(.font-icon-class);
content: @fa-var-close;
}
}
.ui-dialog-content {
/* fixes resize issue e.g. in qr-code dialog */
box-sizing: initial;
& > .popupmenu {
display: block !important;
}
}
}
.ui-dialog iframe,
.ui-dialog-content.iframe {
padding: 0 !important;
overflow: hidden !important;
width: 100% !important;
height: 100%;
border: 0;
}
/* FIXME: why do I need !important here? */
@media screen and (max-width: @screen-width-mini) {
.ui-dialog {
width: 100% !important;
height: 100% !important;
display: flex;
flex-direction: column;
.ui-resizable-handle,
.ui-dialog-titlebar-close {
display: none !important;
}
.ui-dialog-titlebar {
}
.ui-dialog-content {
flex: 1;
&:not(.iframe) {
padding: .5em !important;
}
}
.ui-dialog-buttonpane {
padding: 0 !important;
text-align: center !important;
.ui-dialog-buttonset button {
margin: 0 !important;
border: 0 !important;
box-shadow: none;
&:before {
display: block;
width: auto;
height: 1.25em;
margin: 0;
}
&.btn-primary {
color: #007bff; /* TODO: var */
background: transparent;
}
&.btn-secondary {
color: #868e96; /* TODO: var */
background: transparent;
}
}
}
}
}

@ -2,7 +2,7 @@
<roundcube:object name="aboutcontent" />
<div>
<div class="frame-content">
<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
<p class="copyright">Copyright &copy; 2005-2016, The Roundcube Dev Team</p>
<p class="license">This program is free software;

@ -2,7 +2,7 @@
<h1 class="voice"><roundcube:object name="pagetitle" /></h1>
<div>
<div class="formcontent">
<roundcube:object name="composeFormHead" role="main" />
<div id="bounceheaders" role="region" aria-labelledby="aria-label-composeheaders">
<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>

@ -2,7 +2,7 @@
<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="importcontacts" /></h1>
<div>
<div class="formcontent">
<roundcube:object name="importstep" class="propform" />
</div>

@ -2,7 +2,7 @@
<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="advsearch" /></h1>
<div>
<div class="formcontent">
<roundcube:object name="searchform" id="advsearchform" class="tabbed" size=30 />
</div>

@ -312,7 +312,7 @@ function rcube_elastic_ui()
// Tabs do not scale nicely on very small screen, so can be used
// only with small number of tabs with short text labels
// TODO: Should we use Accordion widget instead on mobile?
$('.tabbed', context).each(function(idx, item) {
$('form.tabbed,div.tabbed', context).each(function(idx, item) {
var tabs = [], nav = $('<ul>').attr({'class': 'nav nav-tabs', role: 'tablist'});
$(this).addClass('tab-content').children('fieldset').each(function(i, fieldset) {

Loading…
Cancel
Save