sascha
/
nextcloud-server
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(settings): move apps list styles to components 

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
pull/44236/head
Grigorii K. Shartsev 2024-03-13 20:40:42 +07:00
parent eac928af84
commit d181a82de7
4 changed files with 246 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
apps/settings/css/settings.scss
Unescape Escape View File

@ -538,7 +538,7 @@ span.usersLastLoginTooltip {
white-space: nowrap;
}
/* APPS */
/* SETTINGS NAVIGATION */
#app-navigation {
/* Navigation icons */
img {
@ -558,93 +558,7 @@ span.usersLastLoginTooltip {
}
}
.app-version {
color: var(--color-text-maxcontrast);
}
#apps-list.store {
.section {
border: 0;
}
.app-name {
display: block;
margin: 5px 0;
}
.app-image-icon .icon-settings-dark {
width: 100%;
height: 150px;
background-size: 45px;
opacity: 0.5;
}
.actions {
margin-top: 10px;
button {
margin: 10px 0;
}
}
}
@media only screen and (min-width: 1601px) {
.store .section {
width: 25%;
}
.with-app-sidebar .store .section {
width: 33%;
}
}
@media only screen and (max-width: 1600px) {
.store .section {
width: 25%;
}
.with-app-sidebar .store .section {
width: 33%;
}
}
@media only screen and (max-width: 1400px) {
.store .section {
width: 33%;
}
.with-app-sidebar .store .section {
width: 50%;
}
}
@media only screen and (max-width: 900px) {
.store .section {
width: 50%;
}
.with-app-sidebar .store .section {
width: 100%;
}
}
@media only screen and (max-width: variables.$breakpoint-mobile) {
.store .section {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.store .section {
width: 100%;
}
}
/* hide app version and level on narrower screens */
@media only screen and (max-width: 900px) {
.apps-list.installed {
.app-version, .app-level {
display: none !important;
}
}
}
/* SETTINGS SECTIONS */
.section {
margin-bottom: 0;
/* section divider lines, none needed for last one */
@ -664,148 +578,6 @@ span.usersLastLoginTooltip {
}
}
.app-image {
position: relative;
height: 150px;
opacity: 1;
overflow: hidden;
}
.missing-dependencies {
list-style: initial;
list-style-type: initial;
list-style-position: inside;
}
.apps-list {
$toolbar-padding: 8px;
$toolbar-height: 44px + $toolbar-padding * 2;
.app-list-move {
transition: transform 1s;
}
#app-list-update-all {
margin-left: 10px;
}
.toolbar {
height: $toolbar-height;
padding: $toolbar-padding;
// Leave room for app-navigation-toggle
padding-left: $toolbar-height;
width: 100%;
background-color: var(--color-main-background);
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
}
&.installed {
.apps-list-container {
display: table;
width: 100%;
height: auto;
white-space: normal;
}
margin-bottom: 100px;
.section {
display: table-row;
padding: 0;
margin: 0;
> * {
display: table-cell;
height: initial;
vertical-align: middle;
float: none;
border-bottom: 1px solid var(--color-border);
padding: 6px;
box-sizing: border-box;
}
> .actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: end;
}
&.selected {
background-color: var(--color-background-dark);
}
}
.app-image {
width: 44px;
height: auto;
text-align: right;
}
.app-image-icon svg,
.app-image-icon .icon-settings-dark {
margin-top: 5px;
width: 20px;
height: 20px;
opacity: .5;
background-size: cover;
display: inline-block;
}
.actions {
text-align: right;
.icon-loading-small {
display: inline-block;
top: 4px;
margin-right: 10px;
}
}
}
&:not(.installed) .app-image-icon svg {
position: absolute;
bottom: 43px;
/* position halfway vertically */
width: 64px;
height: 64px;
opacity: .1;
}
display: flex;
flex-wrap: wrap;
align-content: flex-start;
.section {
position: relative;
flex: 0 0 auto;
&:hover {
background-color: var(--color-background-dark);
}
}
}
// Display buttons above each other on mobile
@media (max-width: math.div(variables.$breakpoint-mobile, 2)) {
.apps-list.installed .section > .actions {
display: table-cell;
}
}
#apps-list-search {
.section {
h2 {
margin-bottom: 0;
}
}
}
/* LOG */
#log {
white-space: normal;

240
apps/settings/src/components/AppList.vue
Unescape Escape View File

@ -312,20 +312,238 @@ export default {
</script>
<style lang="scss" scoped>
.app-bundle-heading {
@use '../../../../core/css/variables.scss' as variables;
@use 'sass:math';
$toolbar-padding: 8px;
$toolbar-height: 44px + $toolbar-padding * 2;
#apps-list.store {
.section {
border: 0;
}
:deep(.app-name) {
display: block;
margin: 5px 0;
}
:deep(.app-image-icon .icon-settings-dark) {
width: 100%;
height: 150px;
background-size: 45px;
opacity: 0.5;
}
:deep(.actions) {
margin-top: 10px;
button {
margin: 10px 0;
}
}
}
.apps-list {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
// For transition group
.app-list-move {
transition: transform 1s;
}
#app-list-update-all {
margin-left: 10px;
}
.toolbar {
height: $toolbar-height;
padding: $toolbar-padding;
// Leave room for app-navigation-toggle
padding-left: $toolbar-height;
width: 100%;
background-color: var(--color-main-background);
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
margin: 20px 10px 20px 0;
}
.app-bundle-header {
margin: 0 10px 0 50px;
font-weight: bold;
font-size: 20px;
line-height: 30px;
color: var(--color-text-light);
// Installed = list/bundle view in a table, not cards in store view
&.installed {
margin-bottom: 100px;
.apps-list-container {
display: table;
width: 100%;
height: auto;
white-space: normal;
}
:deep(.section) {
display: table-row;
padding: 0;
margin: 0;
> * {
display: table-cell;
height: initial;
vertical-align: middle;
float: none;
border-bottom: 1px solid var(--color-border);
padding: 6px;
box-sizing: border-box;
}
> .actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: end;
}
&.selected {
background-color: var(--color-background-dark);
}
}
:deep(.app-image) {
width: 44px;
height: auto;
text-align: right;
}
:deep(.app-image-icon svg),
:deep(.app-image-icon .icon-settings-dark) {
margin-top: 5px;
width: 20px;
height: 20px;
opacity: .5;
background-size: cover;
display: inline-block;
}
:deep(.actions) {
text-align: right;
.icon-loading-small {
display: inline-block;
top: 4px;
margin-right: 10px;
}
}
}
.apps-store-view {
display: flex;
flex-wrap: wrap;
&:not(.installed) :deep(.app-image-icon svg) {
position: absolute;
bottom: 43px;
/* position halfway vertically */
width: 64px;
height: 64px;
opacity: .1;
}
:deep(.section) {
position: relative;
flex: 0 0 auto;
&:hover {
background-color: var(--color-background-dark);
}
}
}
#apps-list-search {
.section {
h2 {
margin-bottom: 0;
}
}
}
.app-bundle-heading {
display: flex;
align-items: center;
margin: 20px 10px 20px 0;
}
.app-bundle-header {
margin: 0 10px 0 50px;
font-weight: bold;
font-size: 20px;
line-height: 30px;
color: var(--color-text-light);
}
.apps-store-view {
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 1601px) {
.store .section {
width: 25%;
}
:deep(.with-app-sidebar) .store .section {
width: 33%;
}
}
@media only screen and (max-width: 1600px) {
.store .section {
width: 25%;
}
:deep(.with-app-sidebar) .store .section {
width: 33%;
}
}
@media only screen and (max-width: 1400px) {
.store .section {
width: 33%;
}
:deep(.with-app-sidebar) .store .section {
width: 50%;
}
}
@media only screen and (max-width: 900px) {
.store .section {
width: 50%;
}
:deep(.with-app-sidebar) .store .section {
width: 100%;
}
}
@media only screen and (max-width: variables.$breakpoint-mobile) {
.store .section {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.store .section {
width: 100%;
}
}
/* hide app version and level on narrower screens */
@media only screen and (max-width: 900px) {
.apps-list.installed {
:deep(.app-version), :deep(.app-level) {
display: none !important;
}
}
}
// Display buttons above each other on mobile
@media (max-width: math.div(variables.$breakpoint-mobile, 2)) {
.apps-list.installed .section > :deep(.actions) {
display: table-cell;
}
}
</style>

10
apps/settings/src/components/AppList/AppItem.vue
Unescape Escape View File

@ -204,6 +204,13 @@ export default {
filter: var(--background-invert-if-bright);
}
.app-image {
position: relative;
height: 150px;
opacity: 1;
overflow: hidden;
}
.app-image img {
width: 100%;
}
@ -217,4 +224,7 @@ export default {
bottom: 0;
}
.app-version {
color: var(--color-text-maxcontrast);
}
</style>

5
apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue
Unescape Escape View File

@ -426,4 +426,9 @@ export default {
background: var(--color-error);
}
.missing-dependencies {
list-style: initial;
list-style-type: initial;
list-style-position: inside;
}
</style>