+
@@ -14,8 +14,19 @@ import IframeOpenIcon from '@/assets/icons/open-iframe.svg';
export default {
name: 'ItemOpenMethodIcon',
props: {
- openingMethod: String,
- isSmall: Boolean,
+ openingMethod: String, // newtab | sametab | iframe
+ isSmall: Boolean, // If true, will apply small class
+ position: String, // Position classes: top, bottom, left, right
+ isTransparent: Boolean, // If true, will apply opacity
+ },
+ methods: {
+ /* Returns custom class string, from optional props */
+ makeClass(position = 'top right', isSmall = false, transparent = false) {
+ return `opening-method-icon
+ ${position || 'top right'}
+ ${isSmall ? 'short' : ''}
+ ${transparent ? 'transparent' : ''}`;
+ },
},
components: {
NewTabOpenIcon,
@@ -31,16 +42,23 @@ export default {
position: absolute;
width: 1rem;
margin: 2px;
- right: 0;
- top: 0;
path {
fill: var(--primary-transparent);
}
}
+ &.top svg { top: 0; }
+ &.bottom svg { bottom: 0; }
+ &.left svg { left: 0; }
+ &.right svg { right: 0; }
+
&.short svg {
- width: 0.5rem;
+ width: 0.8rem;
margin: 0;
}
+
+ &.transparent svg {
+ opacity: 0.5;
+ }
}
diff --git a/src/components/Settings/ItemSizeSelector.vue b/src/components/Settings/ItemSizeSelector.vue
index a8ae819b..346992a9 100644
--- a/src/components/Settings/ItemSizeSelector.vue
+++ b/src/components/Settings/ItemSizeSelector.vue
@@ -2,11 +2,11 @@
@@ -36,6 +36,9 @@ export default {
updateIconSize(iconSize) {
this.$emit('iconSizeUpdated', iconSize);
},
+ tooltip(content) {
+ return { content, trigger: 'hover focus', delay: 250 };
+ },
},
};
diff --git a/src/components/Settings/KeyboardShortcutInfo.vue b/src/components/Settings/KeyboardShortcutInfo.vue
index 07258faf..6cc048c4 100644
--- a/src/components/Settings/KeyboardShortcutInfo.vue
+++ b/src/components/Settings/KeyboardShortcutInfo.vue
@@ -5,8 +5,8 @@
x
Just start typing to filter. Then use the tab key to cycle through results,
- and press enter to launch the selected item. You can hit Esc at anytime to
- clear the search. Easy 🥳
+ and press enter to launch the selected item, or alt + enter to open in a modal.
+ You can hit Esc at anytime to clear the search. Easy 🥳
diff --git a/src/components/Settings/LayoutSelector.vue b/src/components/Settings/LayoutSelector.vue
index 28a235c4..59b0bc4a 100644
--- a/src/components/Settings/LayoutSelector.vue
+++ b/src/components/Settings/LayoutSelector.vue
@@ -2,11 +2,11 @@
@@ -36,6 +36,9 @@ export default {
updateDisplayLayout(layout) {
this.$emit('layoutUpdated', layout);
},
+ tooltip(content) {
+ return { content, trigger: 'hover focus', delay: 250 };
+ },
},
};
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 632d8058..be326b5c 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -66,6 +66,7 @@ export default {
border-radius: 20px 0 0;
background: var(--background);
div {
+ margin-left: 0.5rem;
opacity: 0.85;
&:hover { opacity: 1; }
}
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index c8118925..d5f8f5eb 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -81,7 +81,6 @@ export default {
flex-direction: column;
align-items: flex-start;
height: 100%;
- padding: 0 1rem;
span.theme-label {
font-size: 1rem;
color: var(--primary);
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 40949476..1faed132 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,12 +4,15 @@
-
+
No Data Found Yet
@@ -42,6 +46,7 @@ export default {
data: () => ({
searchValue: '',
layout: '',
+ itemSizeBound: '',
}),
computed: {
layoutOrientation: {
@@ -51,6 +56,13 @@ export default {
this.layout = layout;
},
},
+ iconSize: {
+ get: () => localStorage.iconSize || 'medium',
+ set: function setIconSize(iconSize) {
+ localStorage.setItem('iconSize', iconSize);
+ this.itemSizeBound = iconSize;
+ },
+ },
},
methods: {
/* Returns true if there is one or more sections in the config */
@@ -92,9 +104,9 @@ export default {
setLayoutOrientation(layout) {
this.layoutOrientation = layout;
},
- /* Either gets user's preferred layout from session, or returns default */
- getLayoutOrientation() {
- return localStorage.layoutOrientation || 'default';
+ /* Sets item size attribute, which is used by ItemGroup */
+ setItemSize(itemSize) {
+ this.iconSize = itemSize;
},
getAvailibleThemes() {
const availibleThemes = {};
@@ -134,7 +146,8 @@ export default {
},
mounted() {
this.initiateFontAwesome();
- this.layout = this.getLayoutOrientation();
+ this.layoutOrientation = this.layoutOrientation;
+ this.itemSizeBound = this.iconSize;
},
};