Merge pull request #8496 from nextcloud/ext-strg-design-fixes

External storage design fixes and update

1 files changed, 130 insertions, 0 deletions

diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss
new file mode 100644
index 00000000000..0f52ed3b2a1
--- /dev/null
+++ b/apps/files_external/css/settings.scss
@@ -0,0 +1,130 @@
+#global_credentials {
+	padding: 0 30px;
+}
+
+#files_external {
+	margin-bottom: 0px;
+}
+
+#externalStorage {
+	margin: 15px 0 20px 0;
+}
+
+#externalStorage td.status {
+	/* overwrite conflicting core styles */
+	display: table-cell;
+	vertical-align: middle;
+}
+
+#externalStorage td.status > span {
+	display: inline-block;
+	height: 28px;
+	width: 28px;
+	vertical-align: text-bottom;
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+td.mountPoint, td.backend { width:160px; }
+#externalStorage td>img { padding-top:7px; opacity: 0.5; }
+#externalStorage td>img:hover { padding-top:7px; cursor:pointer; opacity: 1; }
+#addMountPoint>td { border:none; }
+#addMountPoint>td.applicable { visibility:hidden; }
+#addMountPoint>td.hidden { visibility:hidden; }
+
+#externalStorage td {
+	height: 50px;
+	&.mountOptionsToggle,
+	&.remove,
+	&.save {
+		position: relative;
+		padding: 0 !important;
+		width: 44px;
+		[class^='icon-'],
+		[class*=' icon-'] {
+			opacity: 0.5;
+			padding: 14px;
+			vertical-align: text-bottom;
+			cursor: pointer;
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+#selectBackend {
+	margin-left: -10px;
+	width: 150px;
+}
+
+#externalStorage td.configuration,
+#externalStorage td.backend {
+	white-space: normal;
+}
+#externalStorage td.configuration > * {
+	white-space: nowrap;
+}
+
+#externalStorage td.configuration input.added  {
+	margin-right: 6px;
+}
+
+#externalStorage label > input[type="checkbox"] {
+	margin-right: 3px;
+}
+
+#externalStorage td.configuration label {
+	width: 100%;
+	display: inline-flex;
+	align-items: center;
+}
+
+#externalStorage td.configuration input.disabled-success {
+	background-color: rgba(134, 255, 110, 0.9);
+}
+
+
+#externalStorage td.applicable div.chzn-container {
+	position: relative;
+	top: 3px;
+}
+
+#userMountingBackends {
+	padding-left: 25px;
+}
+
+.files-external-select2 .select2-results .select2-result-label {
+	height: 32px;
+	padding: 3px;
+}
+.files-external-select2 .select2-results .select2-result-label > span {
+	display: block;
+	position: relative;
+}
+.files-external-select2 .select2-results .select2-result-label .avatardiv {
+	display:inline-block;
+}
+.files-external-select2 .select2-results .select2-result-label .avatardiv + span {
+	position: absolute;
+	top: 5px;
+	margin-left: 10px;
+}
+.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type="group"] + span {
+	vertical-align: top;
+	top: 6px;
+	position: absolute;
+	max-width: 80%;
+	left: 30px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+#externalStorage .mountOptionsToggle .dropdown {
+	width: auto;
+}
+
+.nav-icon-external-storage {
+	background-image: url('../img/app-dark.svg?v=1');
+}