web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix UI issues with the new pad modals

Browse Source
This commit is contained in:
yflory
2018-09-17 14:39:52 +02:00
parent 179df27e3c
commit 7a93927068
3 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
customize.dist/src/less2/include/toolbar.less
View File

@@ -319,11 +319,15 @@
margin: 50px; margin: 50px;
} }
&> div { &> div {
flex: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
overflow-y: auto; }
&> div:last-child {
flex: unset;
margin: 50px 0;
} }
} }
@@ -342,13 +346,15 @@
margin-left: 5px; margin-left: 5px;
} }
@media screen and (max-height: @browser_media-not-big) { @media screen and (max-height: @browser_media-medium-screen),
screen and (max-width: @browser_media-medium-screen) {
.cp-modal { .cp-modal {
& > p { & > p {
display: none; display: none;
} }
& > div { & > div {
align-content: unset; align-content: unset;
align-items: center;
li { li {
height: 40px; height: 40px;
width: 200px; width: 200px;
@@ -356,9 +362,11 @@
align-items: center; align-items: center;
.fa { .fa {
font-size: 32px; font-size: 32px;
min-width: 50px;
} }
.cp-icons-name { .cp-icons-name {
height: auto; height: auto;
text-align: left;
} }
} }
} }

7
www/common/common-ui-elements.js
View File

@@ -1782,13 +1782,16 @@ define([
var $container = $('<div>'); var $container = $('<div>');
var i = 0; var i = 0;
AppConfig.availablePadTypes.forEach(function (p) { var types = AppConfig.availablePadTypes.filter(function (p) {
if (p === 'drive') { return; } if (p === 'drive') { return; }
if (p === 'contacts') { return; } if (p === 'contacts') { return; }
if (p === 'todo') { return; } if (p === 'todo') { return; }
if (p === 'file') { return; } if (p === 'file') { return; }
if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes && if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; } AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
return true;
});
types.forEach(function (p) {
var $element = $('<li>', { var $element = $('<li>', {
'class': 'cp-icons-element', 'class': 'cp-icons-element',
'id': 'cp-newpad-icons-'+ (i++) 'id': 'cp-newpad-icons-'+ (i++)
@@ -1812,7 +1815,7 @@ define([
var selected = -1; var selected = -1;
var next = function () { var next = function () {
selected = ++selected % 5; selected = ++selected % types.length;
$container.find('.cp-icons-element-selected').removeClass('cp-icons-element-selected'); $container.find('.cp-icons-element-selected').removeClass('cp-icons-element-selected');
$container.find('#cp-newpad-icons-'+selected).addClass('cp-icons-element-selected'); $container.find('#cp-newpad-icons-'+selected).addClass('cp-icons-element-selected');
}; };

18
www/drive/app-drive.less
View File

@@ -653,8 +653,10 @@
#cp-app-drive-new-ghost-dialog.cp-modal-container { #cp-app-drive-new-ghost-dialog.cp-modal-container {
.drive_fileIcon; .drive_fileIcon;
border: 1px solid @colortheme_modal-fg;
li:not(.cp-app-drive-element-selected):hover { li:not(.cp-app-drive-element-selected):hover {
border: 1px solid white; background: @colortheme_modal-fg;
color: @colortheme_modal-bg;
} }
.cp-modal { .cp-modal {
display: flex; display: flex;
@@ -663,14 +665,16 @@
cursor: pointer; cursor: pointer;
} }
&> p { &> p {
margin: 50px; display: flex;
align-items: center;
justify-content: center;
} }
&> div { &> div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
overflow-y: auto; flex: 1;
.cp-app-drive-new-upload { .cp-app-drive-new-upload {
break-after: always; break-after: always;
page-break-after: always; page-break-after: always;
@@ -682,23 +686,27 @@
white-space: nowrap; white-space: nowrap;
} }
@media screen and (max-height: @browser_media-not-big) { @media screen and (max-width: @browser_media-medium-screen),
screen and (max-height: @browser_media-medium-screen) {
.cp-modal { .cp-modal {
& > p { & > p {
display: none; display: none;
} }
& > div { & > div {
align-content: unset;
li { li {
height: 40px; height: 40px;
width: 90%; width: 90%;
display: flex; display: flex;
align-items: center; align-items: center;
align-content: unset;
.fa { .fa {
font-size: 32px; font-size: 32px;
min-width: 50px;
} }
.cp-app-drive-new-name { .cp-app-drive-new-name {
height: auto; height: auto;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }