Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make viewoption modes configurable via appBar || Extend OcResourceIcon for spaces #8105

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion changelog/unreleased/enhancement-condensed-files-view
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
Enhancement: Add switch to enable condensed resource table

We've added a switch to have a more condensed resource table.
The change gets saved to the route and persisted across resource navigation.
The change gets saved to the route and persisted across folder
navigation in all files, spaces and favorites views.

https://github.com/owncloud/web/pull/7976
https://github.com/owncloud/web/pull/8105
https://github.com/owncloud/web/issues/6380
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Enhancement: Make OcResourceIcon accept space resource

We have modified the OcResourceIcon component to show the space icon if a space resource is passed.

https://github.com/owncloud/web/pull/8105
19 changes: 10 additions & 9 deletions packages/design-system/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,20 +65,20 @@
"depcheck": "^1.3.1",
"file-loader": "^6.2.0",
"filesize": "^9.0.9",
"focus-trap-vue": "^1.1.1",
"focus-trap": "^6.4.0",
"focus-trap-vue": "^1.1.1",
"fuse.js": "^6.4.6",
"glob": "^8.0.3",
"html-loader": "^1.3.2",
"jest": "^28.0.2",
"jest-axe": "^6.0.0",
"jest-environment-jsdom": "^28.0.2",
"jest-serializer-vue": "^2.0.2",
"jest": "^28.0.2",
"luxon": "^3.0.1",
"mini-css-extract-plugin": "^1.3.1",
"node-notifier": "^10.0.0",
"npm-run-all": "^4.1.5",
"npm": "^8.0.0",
"npm-run-all": "^4.1.5",
"onchange": "^7.1.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"popper-max-size-modifier": "^0.2.0",
Expand All @@ -88,40 +88,40 @@
"postcss-url": "^9.0.0",
"prettier": "^2.3.2",
"process": "^0.11.10",
"react-dom": "^18.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"rimraf": "^3.0.2",
"sass": "1.56.2",
"sass-loader": "^10.1.0",
"sass-resources-loader": "^2.0.1",
"sass": "1.56.2",
"semver": "^7.1.3",
"shelljs": "^0.8.3",
"style-dictionary": "^3.0.0-rc.8",
"style-loader": "^2.0.0",
"style-value-types": "^5.0.0",
"stylelint": "^14.14.0",
"stylelint-config-sass-guidelines": "^9.0.0",
"stylelint-config-standard": "^26.0.0",
"stylelint": "^14.14.0",
"tinycolor2": "^1.4.2",
"tippy.js": "^6.3.7",
"typescript": "^4.3.2",
"url-loader": "^4.1.1",
"v-calendar": "^2.3.4",
"vue": "2.7.14",
"vue-gettext": "^2.1.12",
"vue-inline-svg": "^2.0.0",
"vue-jest": "^3.0.4",
"vue-loader": "^15.9.0",
"vue-select": "^3.12.0",
"vue-style-loader": "^4.1.2",
"vue-styleguidist": "^4.44.2",
"vue": "2.7.14",
"web-test-helpers": "workspace:*",
"webfontloader": "^1.6.28",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^4.2.0",
"webpack-merge-and-include-globally": "^2.1.24",
"webpack-merge": "^5.4.0",
"webpack-merge-and-include-globally": "^2.1.24",
"webpack-node-externals": "^3.0.0",
"webpack": "^4.41.6",
"yaml": "^2.0.0"
},
"peerDependencies": {
Expand All @@ -138,6 +138,7 @@
"vue": "^2.7.13",
"vue-inline-svg": "^2.0.0",
"vue-select": "^3.12.0",
"web-client": "npm:@ownclouders/web-client",
"webfontloader": "^1.6.28"
},
"engines": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,8 @@
</template>

<script>
import { AVAILABLE_SIZES } from '../../helpers/constants'

import OcButton from '../OcButton/OcButton.vue'
import OcDrop from '../OcDrop/OcDrop.vue'
import OcIcon from '../OcIcon/OcIcon.vue'
Expand Down Expand Up @@ -140,19 +142,21 @@ export default {
required: false,
default: 'medium',
validator: (value) => {
return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge|remove)/)
return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
}
}
},
computed: {
dropdownItems() {
if (this.items.length <= 1 || !this.items) return false

if (this.items.length <= 1 || !this.items) {
return false
}
return [...this.items].reverse().slice(1)
},
currentFolder() {
if (this.items.length === 0 || !this.items) return false

if (this.items.length === 0 || !this.items) {
return false
}
return [...this.items].reverse()[0]
},
contextMenuLabel() {
Expand Down
5 changes: 3 additions & 2 deletions packages/design-system/src/components/OcDrop/OcDrop.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<script lang="ts">
import tippy, { hideAll } from 'tippy.js'
import { destroy, hideOnEsc } from '../../directives/OcTooltip'
import { AVAILABLE_SIZES } from '../../helpers/constants'
import uniqueId from '../../utils/uniqueId'
import { getSizeClass } from '../../utils/sizeClasses'
import { defineComponent } from 'vue'
Expand Down Expand Up @@ -106,8 +107,8 @@ export default defineComponent({
type: String,
required: false,
default: 'medium',
validator: (value: string) => {
return !!value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge|remove)/)
validator: (value) => {
return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
}
},
/**
Expand Down
17 changes: 12 additions & 5 deletions packages/design-system/src/components/OcIcon/OcIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,10 @@
</template>

<script>
import uniqueId from '../../utils/uniqueId'
import InlineSvg from 'vue-inline-svg'
import { AVAILABLE_SIZES } from '../../helpers/constants'
import { getSizeClass } from '../../utils/sizeClasses'
import uniqueId from '../../utils/uniqueId'
/**
* Icons are used to visually communicate core parts of the product and
* available actions. They can act as wayfinding tools to help users more
Expand All @@ -44,7 +45,9 @@ import { getSizeClass } from '../../utils/sizeClasses'
InlineSvg.name = 'inline-svg'
/*InlineSvg.methods.download = name => {
return (promise => {
if (promise.isPending) return promise
if (promise.isPending) {
return promise
}
let isPending = true
let result = promise.then(
v => {
Expand Down Expand Up @@ -122,7 +125,7 @@ export default {
type: String,
default: 'medium',
validator: (value) => {
return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge)/)
return AVAILABLE_SIZES.some((e) => e === value)
}
},
/**
Expand Down Expand Up @@ -154,7 +157,9 @@ export default {
nameWithFillType() {
const path = 'icons/'
const fillType = this.fillType.toLowerCase()
if (fillType === 'none') return `${path}${this.name}.svg`
if (fillType === 'none') {
return `${path}${this.name}.svg`
}
return `${path}${this.name}-${fillType}.svg`
}
},
Expand All @@ -166,7 +171,9 @@ export default {
return this.prefix(c)
},
prefix(string) {
if (string !== null) return `oc-icon-${string}`
if (string !== null) {
return `oc-icon-${string}`
}
},
transformSvgElement(svg) {
if (this.accessibleLabel !== '') {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,11 @@ export default {
return Math.round((100 / this.max) * this.progress)
},
_label() {
if (this.max === 100) return this.progress + '%'
else return `${this.progress}/${this.max}`
if (this.max === 100) {
return this.progress + '%'
} else {
return `${this.progress}/${this.max}`
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ describe('OcRecipient', () => {
hasAvatar: false
})

console.log(wrapper.html())
const icon = wrapper.find('[data-testid="recipient-icon"]')

expect(icon.exists()).toBeTruthy()
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { shallowMount } from 'web-test-helpers'
import { AVAILABLE_SIZES } from '../../helpers/constants'
import { OcResourceIcon } from '..'

const resources = ['file', 'folder', 'space']

describe('OcResourceIcon', () => {
resources.forEach((resourceType) => {
AVAILABLE_SIZES.forEach((size) => {
it(`renders OcIcon for resource type ${resourceType} in size ${size}`, () => {
const { wrapper } = getWrapper({ resourceType, size })
expect(wrapper.html()).toMatchSnapshot()
})
})
})
})

function getWrapper(props) {
return {
wrapper: shallowMount(OcResourceIcon as any, {
props: {
resource: { type: props.resourceType },
size: props.size
}
})
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,27 @@
:name="iconName"
:color="iconColor"
:size="size"
:class="[
'oc-resource-icon',
{ 'oc-resource-icon-file': !isFolder, 'oc-resource-icon-folder': isFolder }
]"
:class="['oc-resource-icon', iconTypeClass]"
/>
</template>

<script>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Resource } from 'web-client'

import OcIcon from '../OcIcon/OcIcon.vue'
import iconNameMap from '../../helpers/resourceIconExtensionMapping'
import iconColorMap from '../../helpers/resourceIconColorExtensionMapping'
import { AVAILABLE_SIZES } from '../../helpers'
import iconColorMap from '../../helpers/resourceIconColorExtensionMapping.json'
import iconNameMap from '../../helpers/resourceIconExtensionMapping.json'

const defaultFolderColor = 'var(--oc-color-icon-folder)'
const defaultFolderIcon = 'resource-type-folder'
const defaultSpaceColor = 'var(--oc-color-swatch-passive-default)'
const defaultSpaceIcon = 'layout-grid'
const defaultFallbackIconColor = 'var(--oc-color-text-default)'
const defaultFallbackIcon = 'file'

export default {
export default defineComponent({
name: 'OcResourceIcon',
status: 'ready',
release: '12.0.0',
Expand All @@ -31,7 +34,7 @@ export default {
* The resource to be displayed
*/
resource: {
type: Object,
type: Object as PropType<Resource>,
required: true
},
/**
Expand All @@ -41,30 +44,55 @@ export default {
size: {
type: String,
default: 'large',
validator: (value) => {
return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge)/)
validator: (value: string): boolean => {
return AVAILABLE_SIZES.some((e) => e === value)
}
}
},
computed: {
iconName() {
if (this.isFolder) return defaultFolderIcon
if (this.isSpace) {
return defaultSpaceIcon
}
if (this.isFolder) {
return defaultFolderIcon
}
const icon = iconNameMap[this.extension]
return `resource-type-${icon ? icon : defaultFallbackIcon}`
},
iconColor() {
if (this.isFolder) return defaultFolderColor
if (this.isSpace) {
return defaultSpaceColor
}
if (this.isFolder) {
return defaultFolderColor
}
const color = iconColorMap[this.extension]
return color ? color : defaultFallbackIconColor
},
iconTypeClass() {
if (this.isSpace) {
return 'oc-resource-icon-space'
}
if (this.isFolder) {
return 'oc-resource-icon-folder'
}
return 'oc-resource-icon-file'
},
isFolder() {
return this.resource.isFolder
// fallback is necessary since
// sometimes resources without a type
// but with `isFolder` are being passed
return this.resource.type === 'folder' || this.resource.isFolder
},
isSpace() {
return this.resource.type === 'space'
},
extension() {
return this.resource.extension?.toLowerCase()
}
}
}
})
</script>

<style lang="scss">
Expand Down
Loading