Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1048)

Unified Diff: ui/file_manager/file_manager/foreground/css/file_manager.css

Issue 914353004: Update import details panel to comply (mostly) with UX direction. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Exclude details panel button from tab index. Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: ui/file_manager/file_manager/foreground/css/file_manager.css
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index c7de8511abdf8c54e58c99547d3e6df4bf43f309..0a26a7a68cfa5b7eee864d5db017aa7b72a79f43 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -339,27 +339,75 @@ body.selecting .dialog-header {
#cloud-import-details {
background-color: white;
- box-sizing: border-box;
- height: 320px;
- opacity: .85;
- padding: 10px;
+ border-radius: 4px;
+ box-shadow: 2px 2px 6px #555555;
+ line-height: 1.5em;
position: absolute;
- right: 0px;
- top: 49px;
- transform: translateX(0);
- transition: transform 0.2s ease;
- width: 270px;
+ right: 75px; /* Positioned in relation to the cloud-import toolbar button */
+ top: 38px; /* Positioned just overlapping the top of the toolbar */
+ transition: all 0.2s ease;
+ width: 250px;
z-index: 5;
}
-#cloud-import-details.offscreen {
+#cloud-import-details.hidden {
+ -webkit-transform: translateX(25px);
opacity: 0;
- transform: translateX(270px); /* Keep in sync with width. */
}
-#cloud-import-details div {
- border: 0px 0px 1px 0px solid gray;
- padding: 10px;
+#cloud-import-details .banner {
+ background-color: #37474F;
+ border-radius: 4px 4px 0px 0px;
+ color: white;
+ padding: 20px;
+}
+
+#cloud-import-details .banner .title {
+ font-size: 122%;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+#cloud-import-details .main {
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+}
+
+#cloud-import-details .status {
+ display: flex;
+ flex-direction: row;
+ margin-top: .2em;
+}
+
+#cloud-import-details .status core-icon {
+ display: block;
+ height: 16px;
+ opacity: .6;
+ width: 16px;
+}
+
+#cloud-import-details .status .content {
+ flex: 1;
+ color: #646464;
+ padding-left: 10px;
+}
+
+#cloud-import-details .status .content::first-line {
+ font-size: 110%;
+ color: #333333;
+}
+
+#cloud-import-details .status .destination-link {
+ color: #1BA8F3;
+ cursor: pointer;
+}
+
+#cloud-import-details paper-button.import {
+ align-self: flex-end;
+ background-color: #1BA8F3;
+ color: white;
+ margin-top: 20px;
}
#files-selected-label {

Powered by Google App Engine
This is Rietveld 408576698