Skip to content

Update how About License information is displayed in EditSourceModal #4716

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.

Sign up for GitHub

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

Merged
LianaHarris360 merged 4 commits into from
Sep 12, 2024
Merged

Update how About License information is displayed in EditSourceModal #4716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a85aac1
Move content of AboutLicenseModal to LicenseDropdown with toggle button
LianaHarris360 Sep 6, 2024
0cefdce
Remove AboutLicenseModal and references
LianaHarris360 Sep 6, 2024
a3a0fe0
Fix string typos and license input selection misalignment
LianaHarris360 Sep 9, 2024
78221d4
Add mininmum width to license dropdown and adjust background color
LianaHarris360 Sep 10, 2024
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
2 changes: 0 additions & 2 deletions ...ration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

<div>
<KModal
v-if="!isAboutLicensesModalOpen"
:title="$tr('editAttribution')"
:submitText="$tr('saveAction')"
:cancelText="$tr('cancelAction')"
Expand Down Expand Up @@ -170,7 +169,6 @@
/* eslint-enable kolibri/vue-no-unused-properties */
},
computed: {
...mapGetters(['isAboutLicensesModalOpen']),
...mapGetters('contentNode', ['getContentNodes']),
...mapFormGettersSetters(sourceKeys),
nodes() {
Expand Down
5 changes: 0 additions & 5 deletions ...curation/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ let nodes;
let store;
let contentNodeActions;
let generalActions;
let generalGetters;

const MIXED_VALUE = 'Mixed';

Expand Down Expand Up @@ -64,12 +63,8 @@ describe('EditSourceModal', () => {
generalActions = {
showSnackbarSimple: jest.fn(),
};
generalGetters = {
isAboutLicensesModalOpen: () => false,
};
store = new Vuex.Store({
actions: generalActions,
getters: generalGetters,
modules: {
contentNode: {
namespaced: true,
Expand Down
6 changes: 0 additions & 6 deletions contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,6 @@
</VFlex>
</VLayout>
</BottomBar>
<AboutLicensesModal
v-if="isAboutLicensesModalOpen"
/>
<InheritAncestorMetadataModal
:parent="(createMode && detailNodeIds.length) ? parent : null"
@inherit="inheritMetadata"
Expand Down Expand Up @@ -195,7 +192,6 @@
import { fileSizeMixin, routerMixin } from 'shared/mixins';
import FileStorage from 'shared/views/files/FileStorage';
import MessageDialog from 'shared/views/MessageDialog';
import AboutLicensesModal from 'shared/views/AboutLicensesModal';
import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
import Uploader from 'shared/views/files/Uploader';
import LoadingText from 'shared/views/LoadingText';
Expand Down Expand Up @@ -226,7 +222,6 @@
SavingIndicator,
ToolBar,
BottomBar,
AboutLicensesModal,
},
mixins: [fileSizeMixin, routerMixin],
props: {
Expand Down Expand Up @@ -260,7 +255,6 @@
};
},
computed: {
...mapGetters(['isAboutLicensesModalOpen']),
...mapGetters('contentNode', ['getContentNode', 'getContentNodeIsValid']),
...mapGetters('assessmentItem', ['getAssessmentItems']),
...mapGetters('currentChannel', ['currentChannel', 'canEdit']),
Expand Down
4 changes: 0 additions & 4 deletions contentcuration/contentcuration/frontend/channelEdit/getters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,6 @@ export function isComfortableViewMode(state) {
return viewMode === viewModes.COMFORTABLE;
}

export function isAboutLicensesModalOpen(state) {
return state.aboutLicensesModalOpen;
}

// Convenience function to format strings like "Page Name - Channel Name"
// for tab titles
export function appendChannelName(state, getters) {
Expand Down
4 changes: 0 additions & 4 deletions contentcuration/contentcuration/frontend/channelEdit/mutations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,3 @@ export function SET_VIEW_MODE(state, viewMode) {
export function SET_VIEW_MODE_OVERRIDES(state, overrides) {
state.viewModeOverrides = overrides;
}

export function SET_SHOW_ABOUT_LICENSES(state, isOpen) {
state.aboutLicensesModalOpen = isOpen;
}
2 changes: 0 additions & 2 deletions contentcuration/contentcuration/frontend/channelEdit/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ export const STORE_CONFIG = {
* to override the current `viewMode`.
*/
viewModeOverrides: [],

aboutLicensesModalOpen: false,
};
},
actions,
Expand Down
6 changes: 0 additions & 6 deletions contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,9 +222,6 @@
@syncing="syncInProgress"
/>
<QuickEditModal />
<AboutLicensesModal
v-if="isAboutLicensesModalOpen"
/>
<MessageDialog
v-model="showDeleteModal"
:header="$tr('deleteTitle')"
Expand Down Expand Up @@ -321,7 +318,6 @@
import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
import OfflineText from 'shared/views/OfflineText';
import ContentNodeIcon from 'shared/views/ContentNodeIcon';
import AboutLicensesModal from 'shared/views/AboutLicensesModal';
import MessageDialog from 'shared/views/MessageDialog';
import { RouteNames as ChannelRouteNames } from 'frontend/channelList/constants';
import { titleMixin } from 'shared/mixins';
Expand All @@ -346,7 +342,6 @@
MessageDialog,
SavingIndicator,
QuickEditModal,
AboutLicensesModal,
},
mixins: [titleMixin],
props: {
Expand All @@ -370,7 +365,6 @@
...mapState({
offline: state => !state.connection.online,
}),
...mapGetters(['isAboutLicensesModalOpen']),
...mapGetters('contentNode', ['getContentNode']),
...mapGetters('currentChannel', ['currentChannel', 'canEdit', 'canManage', 'rootId']),
rootNode() {
Expand Down
62 changes: 0 additions & 62 deletions contentcuration/contentcuration/frontend/shared/views/AboutLicensesModal.vue
View file
Open in desktop

This file was deleted.

75 changes: 55 additions & 20 deletions contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,38 @@
:class="{ 'with-trailing-input-icon': box }"
Copy link
Member

@AlexVelezLl AlexVelezLl Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We had this class to include the trailing icon for the about licenses modal. As we are removing this, we need to remove also this line and/or fix these alignment styles, and all the related styles here https://github.com/LianaHarris360/studio/blob/0cefdcec13a859cb739914fdb6cd0fabb65c99d9/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue#L242, as this cause this little misalign in the dropdown icon.

image

Copy link
Member Author

@LianaHarris360 LianaHarris360 Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing this out, I was wondering about this misalignment but didn't initially see where it was being set. Now I can get it fixed!

Copy link
Member Author

@LianaHarris360 LianaHarris360 Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The input selection arrow alignment is now fixed :)
EditSourceModal

Copy link
Member

@AlexVelezLl AlexVelezLl Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Liana! It seems we now have this little bug when we select an option with less width 😅 :

image

image

Copy link
Member Author

@LianaHarris360 LianaHarris360 Sep 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this bug was present before these changes were made. I attempted to edit the source on unstable and encountered the same issue. Adding a minimum width fixes it! I also noticed it had a slightly darker background than the rest of the inputs in the EditSource modal and updated that as well.

EditSourceLicense.mov

Full Edit Details page view:
EditDetailsPage

:attach="attach"
@focus="$emit('focus')"
>
<template #append-outer>
<KIconButton
class="info-icon"
data-test="info-icon"
icon="help"
:color="$themeTokens.primary"
@click="setShowAboutLicenses(true)"
/>
</template>
</VSelect>
/>
</template>
</DropdownWrapper>
<p>
<KButton
class="info-link"
appearance="basic-link"
:text="requestFormStrings.$tr('licenseInfoHeader')"
:iconAfter="showAboutLicense ? 'chevronUp' : 'chevronDown'"
@click="toggleAboutLicenseDisplay"
/>
</p>
<div
v-for="(licenseItem, index) in licences"
v-show="showAboutLicense"
:key="index"
class="mb-4 mt-3"
>
<h2 class="font-weight-bold mb-1 subheading">
{{ licenseItem.name }}
</h2>
<p class="body-1 grey--text mb-1">
{{ licenseItem.description }}
</p>
<p v-if="licenseItem.license_url">
<ActionLink
:href="getLicenseUrl(licenseItem)"
target="_blank"
:text="requestFormStrings.$tr('learnMoreButton')"
/>
</p>
</div>
<VTextarea
v-if="isCustom"
ref="description"
Expand All @@ -59,7 +78,7 @@

<script>

import { mapMutations } from 'vuex';
import RequestForm from '../../settings/pages/Storage/RequestForm.vue';
import {
getLicenseValidators,
getLicenseDescriptionValidators,
Expand All @@ -70,6 +89,7 @@
import { LicensesList } from 'shared/leUtils/Licenses';
import { constantsTranslationMixin } from 'shared/mixins';
import DropdownWrapper from 'shared/views/form/DropdownWrapper';
import { crossComponentTranslator } from 'shared/i18n';

const MIXED_VALUE = 'mixed';

Expand Down Expand Up @@ -114,6 +134,12 @@
default: false,
},
},
data() {
return {
requestFormStrings: crossComponentTranslator(RequestForm),
showAboutLicense: false,
};
},
computed: {
license: {
get() {
Expand Down Expand Up @@ -178,17 +204,29 @@
? getLicenseDescriptionValidators().map(translateValidator)
: [];
},
licences() {
return LicensesList.filter(license => license.id).map(license => ({
...license,
name: this.translateConstant(license.license_name),
description: this.translateConstant(license.license_name + '_description'),
}));
},
},
methods: {
...mapMutations({
setShowAboutLicenses: 'SET_SHOW_ABOUT_LICENSES',
}),
translate(item) {
if (item.id === MIXED_VALUE) {
return this.$tr('mixed');
}
return (item.id && item.id !== '' && this.translateConstant(item.license_name)) || '';
},
toggleAboutLicenseDisplay() {
this.showAboutLicense = !this.showAboutLicense;
},
getLicenseUrl(license) {
const isCC = license.license_url.includes('creativecommons.org');
const language = window.languageCode || 'en';
return isCC ? `${license.license_url}deed.${language}` : license.license_url;
},
},
$trs: {
mixed: 'Mixed',
Expand All @@ -202,18 +240,15 @@
<style lang="scss" scoped>

.with-trailing-input-icon {
/deep/ .v-input__append-inner {
margin-right: 32px;
}

/deep/ .v-input__append-outer {
position: absolute;
right: 4px;
margin-top: 8px !important;
}

/deep/ .v-input__control > .v-input__slot {
background: #e9e9e9 !important;
min-width: 400px;
background: #f5f5f5 !important;

&::before {
border-color: rgba(0, 0, 0, 0.12) !important;
Expand Down