From 1f3d501a04022a88116c59fcb8180954893e5a63 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 16 Sep 2012 01:34:50 +0200 Subject: [PATCH] Cleans CSS, adds new grid and list view, replaces small parent-folder icon. --- src/_h5ai/config.js | 2 +- src/_h5ai/css/inc/extended-details.less | 47 +++ src/_h5ai/css/inc/extended-grid.less | 44 ++ src/_h5ai/css/inc/extended-icons.less | 48 +++ src/_h5ai/css/inc/extended-list.less | 41 ++ src/_h5ai/css/inc/extended.less | 429 +++++--------------- src/_h5ai/css/styles.less | 4 + src/_h5ai/icons/16x16/folder-parent-old.png | Bin 0 -> 494 bytes src/_h5ai/icons/16x16/folder-parent.png | Bin 494 -> 621 bytes src/_h5ai/images/view-grid.png | Bin 0 -> 295 bytes src/_h5ai/js/inc/ext/l10n.js | 2 + src/_h5ai/js/inc/view/viewmode.js | 2 +- src/_h5ai/l10n/de.json | 2 + src/_h5ai/l10n/en.json | 2 + 14 files changed, 303 insertions(+), 320 deletions(-) create mode 100644 src/_h5ai/css/inc/extended-details.less create mode 100644 src/_h5ai/css/inc/extended-grid.less create mode 100644 src/_h5ai/css/inc/extended-icons.less create mode 100644 src/_h5ai/css/inc/extended-list.less create mode 100644 src/_h5ai/icons/16x16/folder-parent-old.png create mode 100644 src/_h5ai/images/view-grid.png diff --git a/src/_h5ai/config.js b/src/_h5ai/config.js index cf41f9d6..c156304d 100644 --- a/src/_h5ai/config.js +++ b/src/_h5ai/config.js @@ -42,7 +42,7 @@ var H5AI_CONFIG = { file sizes (see http://en.wikipedia.org/wiki/Binary_prefix). */ "view": { - "modes": ["details", "icons"], + "modes": ["details", "list", "grid", "icons"], "setParentFolderLabels": true, "binaryPrefix": false }, diff --git a/src/_h5ai/css/inc/extended-details.less b/src/_h5ai/css/inc/extended-details.less new file mode 100644 index 00000000..ff66597f --- /dev/null +++ b/src/_h5ai/css/inc/extended-details.less @@ -0,0 +1,47 @@ + +#extended.view-details { + + li { + white-space: nowrap; + clear: both; + + &.header { + display: list-item; + } + + &.entry { + + a, a:active, a:visited { + border-bottom: 1px solid #e8e8e8; + } + } + + .icon, .label, .date, .size { + padding: 6px; + } + + .icon.small { + display: inline-block; + position: absolute; + left: 0; + top: -2px; + width: 16px; + } + + .label { + margin: 0 270px 0 24px; + } + + .date { + position: absolute; + right: 100px; + top: 0; + } + + .size { + position: absolute; + right: 0; + top: 0; + } + } +} diff --git a/src/_h5ai/css/inc/extended-grid.less b/src/_h5ai/css/inc/extended-grid.less new file mode 100644 index 00000000..73d87fcd --- /dev/null +++ b/src/_h5ai/css/inc/extended-grid.less @@ -0,0 +1,44 @@ + +#extended.view-grid { + padding: 3px; + + li { + + &.entry { + float: left; + + a, a:active, a:visited { + margin: 2px; + padding: 8px; + width: 164px; + height: 24px; + float: left; + border-radius: 5px; + border: 2px solid rgba(0,0,0,0); + white-space: nowrap; + + &:hover, &.hover { + border-color: #eee; + } + } + } + + .icon.small { + display: inline-block; + position: relative; + left: 0; + top: -2px; + width: 16px; + } + + .label { + display: inline-block; + padding-left: 6px; + max-width: 140px; + } + + .date, .size { + display: none; + } + } +} diff --git a/src/_h5ai/css/inc/extended-icons.less b/src/_h5ai/css/inc/extended-icons.less new file mode 100644 index 00000000..49c461cf --- /dev/null +++ b/src/_h5ai/css/inc/extended-icons.less @@ -0,0 +1,48 @@ + +#extended.view-icons { + padding: 3px; + + li { + + &.entry { + float: left; + + a, a:active, a:visited { + margin: 8px; + padding: 8px; + width: 100px; + height: 120px; + float: left; + border-radius: 5px; + border: 2px solid rgba(0,0,0,0); + text-align: center; + + &:hover, &.hover { + border-color: #eee; + } + } + } + + .icon.big { + display: block; + height: 48px; + margin-bottom: 6px; + } + + .label { + text-align: center; + word-wrap: break-word; + white-space: normal; + } + + .date, .size { + display: none; + } + } + + .empty, .no-match { + margin: 0 120px; + padding: 16px; + height: 120px; + } +} diff --git a/src/_h5ai/css/inc/extended-list.less b/src/_h5ai/css/inc/extended-list.less new file mode 100644 index 00000000..8093afc3 --- /dev/null +++ b/src/_h5ai/css/inc/extended-list.less @@ -0,0 +1,41 @@ + +#extended.view-list { + + li { + white-space: nowrap; + clear: both; + + &.entry { + + a, a:active, a:visited { + height: 56px; + border-bottom: 1px solid #e8e8e8; + } + } + + .icon, .label, .date, .size { + padding: 6px; + } + + .icon.big { + display: inline-block; + position: absolute; + left: 0; + top: -2px; + width: 100px; + } + + .label { + margin: 0 270px 0 106px; + } + + .date { + margin: 0 0 0 106px; + } + + .date, .size { + position: relative; + top: -6px; + } + } +} diff --git a/src/_h5ai/css/inc/extended.less b/src/_h5ai/css/inc/extended.less index d4b885f9..e769312a 100644 --- a/src/_h5ai/css/inc/extended.less +++ b/src/_h5ai/css/inc/extended.less @@ -9,367 +9,160 @@ background-color: rgba(240,100,0,0.2); } - - -#extended.view-details { +#extended { display: none; + a, a:active, a:visited { + color: #555; + cursor: pointer; + text-decoration: none; + } + ul { margin: 0; padding: 0; list-style: none; + } - li { - position: relative; - white-space: nowrap; - clear: both; + li { + position: relative; - &.header { - font-size: 13px; + &.header { + display: none; + font-size: 13px; - a, a:active, a:visited { - padding-bottom: 18px; + a, a:active, a:visited { + padding-bottom: 18px; + opacity: 0.4; + .transition(all 0.2s ease-in-out); + + img.ascending, img.descending { + position: relative; + top: -2px; + display: none; + width: 12px; + height: 12px; + padding: 0 8px; + } + &:hover { color: #555; - text-decoration: none; - opacity: 0.4; - cursor: pointer; - .transition(all 0.2s ease-in-out); - - img.ascending, img.descending { - position: relative; - top: -2px; - display: none; - width: 12px; - height: 12px; - padding: 0 8px; - } - &:hover { - color: #555; - opacity: 0.9; - } - &.ascending img.ascending { - display: inline; - } - &.descending img.descending { - display: inline; - } + opacity: 0.9; + } + &.ascending img.ascending { + display: inline; + } + &.descending img.descending { + display: inline; } } - &.entry { - a, a:active, a:visited { - display: block; - color: #555; - text-decoration: none; - cursor: pointer; - border-bottom: 1px solid #e8e8e8; + } - &:hover, &.hover { - background-color: #f6f6f6; - color: #e80; - } + &.entry { + + a, a:active, a:visited { + display: block; + overflow: hidden; + + &:hover, &.hover { + color: #e80; + background-color: #f6f6f6; } - &.selected:not(.selecting) a, &.selecting:not(.selected) a { + } + + &.selected:not(.selecting), &.selecting:not(.selected) { + + a, a:active, a:visited { border-color: rgba(240,100,0,0.2); background-color: rgba(240,100,0,0.2); - } - &.error { - a, a:active, a:visited { - color: #aaa; - .label { - .hint { - margin-left: 12px; - font-size: 0.9em; - color: #c55; - } - } - &:hover, &.hover { - opacity: 1; - background-color: #f6f6f6; - color: #e80; - } - } - } - &.folder-parent { - .date, .size { - display: none; + &:hover, &.hover { + border-color: rgba(240,100,0,0.2); + background-color: rgba(240,100,0,0.2); } } } - .icon, .label, .date, .size { - padding: 6px; + } + + &.error { + + a, a:active, a:visited { + color: #aaa; + + &:hover, &.hover { + color: #e80; + } } - .icon { - display: inline-block; - position: absolute; - left: 0; - top: -2px; - width: 16px; - text-align: center; + + .label .hint { + padding: 0 6px; + font-size: 0.9em; + color: #c55; + } + } + + &.folder-parent { + + .date, .size { + display: none; + } + } + + .icon { + display: none; + text-align: center; + + img { + + &.thumb { + .box-shadow(0 0 0 1px #ddd); + } + } + + &.small { img { max-width: 16px; max-height: 16px; - &.thumb { - .box-shadow(0 0 0 1px #ddd); - } } } - .icon.big { - display: none; - } - .label { - display: block; - margin: 0 270px 0 24px; - overflow: hidden; - white-space: nowrap; - text-align: left; - } - .date { - position: absolute; - right: 100px; - top: 0; - text-align: right; - width: 160px; - white-space: nowrap; - } - .size { - position: absolute; - right: 0; - top: 0; - text-align: right; - width: 80px; - white-space: nowrap; - } - } - } - .empty, .no-match { - text-align: center; - margin: 50px 0; - color: #ddd; - font-size: 5em; - font-weight: bold; - } - .no-match { - display: none; - } -} - - - -#extended.view-list { - display: none; - - ul { - margin: 0; - padding: 0; - list-style: none; - - li { - position: relative; - white-space: nowrap; - clear: both; - - &.header { - display: none; - } - &.entry { - a, a:active, a:visited { - display: block; - color: #555; - text-decoration: none; - cursor: pointer; - border-bottom: 1px solid #e8e8e8; - height: 56px; - - &:hover, &.hover { - background-color: #f6f6f6; - color: #e80; - } - } - &.selected:not(.selecting) a, &.selecting:not(.selected) a { - border-color: rgba(240,100,0,0.2); - background-color: rgba(240,100,0,0.2); - } - &.error { - a, a:active, a:visited { - color: #aaa; - - .label { - .hint { - margin-left: 12px; - font-size: 0.9em; - color: #c55; - } - } - &:hover, &.hover { - opacity: 1; - background-color: #f6f6f6; - color: #e80; - } - } - } - &.folder-parent { - .date, .size { - display: none; - } - } - } - .icon, .label, .date, .size { - padding: 6px; - } - .icon { - display: inline-block; - position: absolute; - left: 0; - top: -2px; - width: 100px; - text-align: center; + &.big { img { max-width: 100px; max-height: 48px; - &.thumb { - .box-shadow(0 0 0 1px #ddd); - } } } - .icon.small { - display: none; - } - .label { - display: block; - margin: 0 270px 0 106px; - overflow: hidden; - white-space: nowrap; - text-align: left; - } - .date { - margin: 0 0 0 106px; - text-align: right; - width: 160px; - white-space: nowrap; - } - .size { - text-align: right; - width: 80px; - white-space: nowrap; - } + } + + .label { + display: block; + overflow: hidden; + text-align: left; + white-space: nowrap; + } + + .date { + text-align: right; + width: 160px; + white-space: nowrap; + } + + .size { + text-align: right; + width: 80px; + white-space: nowrap; } } + .empty, .no-match { - text-align: center; margin: 50px 0; - color: #ddd; - font-size: 5em; - font-weight: bold; - } - .no-match { - display: none; - } -} - - - - -#extended.view-icons { - display: none; - padding: 3px; - - ul { - margin: 0; - padding: 0; - list-style: none; - - li { - position: relative; - - &.header { - display: none; - } - &.entry { - float: left; - - a, a:active, a:visited { - display: block; - margin: 8px; - padding: 8px; - width: 100px; - height: 120px; - float: left; - text-align: center; - text-decoration: none; - overflow: hidden; - border-radius: 5px; - color: #555; - cursor: pointer; - border: 2px solid rgba(0,0,0,0); - - &:hover, &.hover { - color: #e80; - border-color: #eee; - background-color: #f6f6f6; - } - .icon { - display: block; - height: 48px; - margin-bottom: 6px; - - img { - max-width: 100px; - max-height: 48px; - &.thumb { - .box-shadow(0 0 0 1px #ddd); - } - } - } - .icon.small { - display: none; - } - .label { - display: block; - word-wrap: break-word; - } - .date, .size { - display: none; - } - } - &.selected:not(.selecting) a, &.selecting:not(.selected) a { - border-color: rgba(240,100,0,0.2); - background-color: rgba(240,100,0,0.2); - } - &.error { - a, a:active, a:visited { - color: #aaa; - text-decoration: none; - - .label { - .hint { - padding: 0 6px; - font-size: 0.9em; - color: #c55; - } - } - &:hover, &.hover { - color: #e80; - border-color: #eee; - background-color: #f6f6f6; - } - } - } - } - } - } - .empty, .no-match { - margin: 0 120px; - padding: 16px; - height: 120px; text-align: center; color: #ddd; font-size: 5em; font-weight: bold; } + .no-match { display: none; } diff --git a/src/_h5ai/css/styles.less b/src/_h5ai/css/styles.less index f09c9afb..39a97d4f 100644 --- a/src/_h5ai/css/styles.less +++ b/src/_h5ai/css/styles.less @@ -14,6 +14,10 @@ @import "inc/content"; @import "inc/extended"; +@import "inc/extended-details"; +@import "inc/extended-icons"; +@import "inc/extended-list"; +@import "inc/extended-grid"; @import "inc/context-menu"; @import "inc/dropbox"; diff --git a/src/_h5ai/icons/16x16/folder-parent-old.png b/src/_h5ai/icons/16x16/folder-parent-old.png new file mode 100644 index 0000000000000000000000000000000000000000..b82d7a992d61f84dd2b2a099b76e3b4bb4b2c7d0 GIT binary patch literal 494 zcmVzaf)kBl_gc8hW;0R51DE+b_YC*U9VH_C2aO-j6tE2l zke1^TydMO*K@gk-L2wFmSF%LJ6>CY743ttsrPMG?_c{>fpM$V zx&|1HMhC!tRiM#m+-j{K%H_9-^;RwbM5N%;yl>2AvqEcK)cEedptTl0jr$c&fquVl kMdZ1*J#}&Gjr3=H0E{cixm!I+_5c6?07*qoM6N<$g0bhzSO5S3 literal 0 HcmV?d00001 diff --git a/src/_h5ai/icons/16x16/folder-parent.png b/src/_h5ai/icons/16x16/folder-parent.png index b82d7a992d61f84dd2b2a099b76e3b4bb4b2c7d0..3c964f195ff962b9c2bdfbedbda91f3e6505274c 100644 GIT binary patch delta 596 zcmV-a0;~P*1MLKmB!2;OQb$4nuFf3k00006VoOIv0RI600RN!9r;`8x010qNS#tmY z2J8R;2J8VIbvQKu000McNliru+zAg9As|qNI#d7v0qsddK~y-)m6EY;6G0G$zuDaj z!k8$L39*zEK}d+=jMBI_5^{>P@e8=7f(Nkj0H7;qEcrPsMSnt~qe+J-QbwY{M4%MJ z$>H1Gq2Lmok5DkuYFC>1XXfAk7XWMR9pEni7gr&KUm_y+fS0Pe323E2fCuIKdp##2 z-+*^cRa?L|uu_|Fe>56B12{Z9`~>{0CRKGCXt{DyJzTrpULOvJPXNZ_@t4_bb_Mua zotVnH)mWQMCV#uCny6|rnM`(pwK^EU+yZV427|3MP1|{%ljk{Unzjdn!4}Y{Hxb|w z@ES+}%?|%l2hzJmF^e!m~aPGbT2uPA7n?+G9 zHHa~us_I$k$Z(BwA|k3cE)CcJvREvZ*0i-1zyrfz+l^6h%$&zYHrPB2HCv zYpqw+hE0edB6#op!NI{vtvWd8jH(({MMN%RjJW{T81vLx+cL&rt;HBqZf*bY3IQO* i7zrUz-alfDC%*x)q1T>7&-)Sp0000Llf6mzaf)kBl_gc8h zW;0R51DE+b_YC*U9VH_C2aO-j6tE2lke1^TydMO*K@gk-L2wFmSF%LJ6>CY743tts zrPMGvs5x56+yE0bS=w=!PyJom#eJOj2CZmi5V z;y4b{G(85gQlJ`Hnx@Bb90$OLtAt%+%*Av%T?cZ9HvoRK*_>HxFM%gmY^3+`cs%qx zPv-MEolfVlnrW@Q2Pld{0q2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4FxvI8%;PQPJ4u3eDN$|G_1&8=KzSq7oJhCiZtN2Yyr<