From 94eba9fe96797908ea81cba473b5b1566cdbd74a Mon Sep 17 00:00:00 2001 From: "Papadakis, Charalampos" Date: Mon, 30 Oct 2023 11:22:50 +0100 Subject: [PATCH 1/3] issue: Landing Page text into localization/translation --- frontend/src/locales/de.json | 6 ++ frontend/src/locales/en.json | 5 ++ frontend/src/views/LandingPage.vue | 127 ++++++++++++----------------- 3 files changed, 63 insertions(+), 75 deletions(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 4cbeb201f..05331bf31 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -144,7 +144,13 @@ } }, "hostLeft": "Warte, bis der Organisator die Sitzung wieder betritt..." + }, + "instruction": { + "setUpSession": "Erstellen Sie eine Planungssitzung und wählen Sie Ihr bevorzugtes Abstimmungsset aus.

Sie können Ihre User Stories importieren oder JIRA verbinden, um Story Points zu synchronisieren.

Verbindung zum Issue-Tracker

DIVENI kann sich mit Issue-Trackern wie Azure DevOps, JIRA Server und Cloud verbinden, um User Stories anzuzeigen und die abgestimmten Ergebnisse Ihres Planning Pokers zu aktualisieren.", + "inviteYourTeam": "Laden Sie Ihr Team mit QR-Code, Einladungslink oder Code ein.

Jeder Benutzer wird zufällig einem Tier zugewiesen und ist bereit zur Schätzung.

Wenn alle in der Sitzung sind, können Sie mit der Schätzung beginnen. Wenn Sie ein Zeitlimit festgelegt haben, wird dieses als Limit für die Abstimmungszeit verwendet.", + "estimateUserStories": "Jedes Mitglied des Teams kann sein definiertes Set verwenden, um die ausgewählte User Story zu bewerten.

Wenn alle abgestimmt haben, zeigt DIVENI die Ergebnisse und wählt zufällig zwei Wähler aus, die das Minimum / Maximum gewählt haben, um ihre Schätzung zu besprechen.

Nach der Diskussion können Sie die Schätzung wiederholen." } + }, "session": { "prepare": { diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 3472ec3d6..3b916370a 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -144,6 +144,11 @@ } }, "hostLeft": "Waiting for the host to come back..." + }, + "instruction": { + "setUpSession": "Create a planning session and select your prefered voting set.

You could import your user stories or connect JIRA to syncronize story points.

Connecting to Issue-Tracker

DIVENI could connect to issue trackers like Azure DevOps, JIRA Server and Cloud to show user stories and update the voted results of your planning poker.", + "inviteYourTeam": "Invite your team using QR-Code, invite link or code.

Every user will be randomly assinged to a animal and is ready to estimate.

If everybody is in the session, you could start estimation. Having defined a time limit this will be used as limit for voting time.", + "estimateUserStories": "Every member of the Team could use your defined set to vote the selected user story.

If everybody has voted, DIVENI shows results and randomly selects two voters having voted minimum / maximum to discuss their estimation.

After discussion you could repeat estimation." } }, "session": { diff --git a/frontend/src/views/LandingPage.vue b/frontend/src/views/LandingPage.vue index 0eda10f19..6505926ad 100644 --- a/frontend/src/views/LandingPage.vue +++ b/frontend/src/views/LandingPage.vue @@ -2,7 +2,7 @@
- + @@ -35,74 +35,49 @@ -
-
-
-

Remote Planning Poker using DIVENI

- - - - - - - - - - - - - - - - - - - - - Create a planning session and select your prefered voting set. - - - You could import your user stories or connect JIRA to syncronize story points. - - - Connecting to Issue-Tracker - - DIVENI could connect to issue trackers like Azure DevOps, JIRA Server and Cloud to show - user stories and update the voted results of your planning poker. - - - - Invite your team using QR-Code, invite link or code. - - Every user will be randomly assinged to a animal and is ready to estimate. - - - If everybody is in the session, you could start estimation. Having defined a time limit - this will be used as limit for voting time. - - - - - Every member of team could use your defined set to vote the selected user story. - - - If everybody has voted, DIVENI shows results and randomly selects two voters having - voted minimum / maximum to discuss their estimation. - - After discussion you could repeat estimation. - - -
+
+
+
+

Remote Planning Poker using DIVENI

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

About DIVENI

DIVENI was initially developed by students of HTWG Constance and is open source now.

@@ -119,12 +94,13 @@ import LandingPageCard from "../components/LandingPageCard.vue"; import Constants from "../constants"; import Session from "../model/Session"; import AnalyticsDataComponent from "../components/AnalyticsDataComponent.vue"; + export default Vue.extend({ name: "LandingPage", components: { LandingPageCard, AnalyticsDataComponent, -}, + }, data() { return { sessionWrapper: {} as { session: Session }, @@ -165,7 +141,7 @@ export default Vue.extend({ sessionState: string; members: Array; }; - this.sessionWrapper = { session }; + this.sessionWrapper = {session}; } catch (e) { console.error(`got error: ${e}`); window.localStorage.removeItem("adminCookie"); @@ -173,10 +149,10 @@ export default Vue.extend({ } }, goToJoinPage() { - this.$router.push({ name: "JoinPage" }); + this.$router.push({name: "JoinPage"}); }, goToPrepareSessionPage() { - this.$router.push({ name: "PrepareSessionPage" }); + this.$router.push({name: "PrepareSessionPage"}); }, goToSessionPage() { this.$store.commit("setUserStories", { @@ -211,7 +187,7 @@ export default Vue.extend({ .teaser { background: linear-gradient(var(--background-color-primary), var(--pictureGradientEnd)), - url("~@/assets/img/diveni-background.png"); + url("~@/assets/img/diveni-background.png"); background-size: cover; background-repeat: no-repeat; } @@ -226,8 +202,9 @@ export default Vue.extend({ .card-sub-title { color: red; } -.card-title{ - color:var(--text-primary-color) + +.card-title { + color: var(--text-primary-color) } .parent { From fc42d9ede38b05e2f49a8a230f2c40b04724eea6 Mon Sep 17 00:00:00 2001 From: "Papadakis, Charalampos" Date: Mon, 30 Oct 2023 12:00:07 +0100 Subject: [PATCH 2/3] issue: german removed --- frontend/src/locales/de.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 05331bf31..4cbeb201f 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -144,13 +144,7 @@ } }, "hostLeft": "Warte, bis der Organisator die Sitzung wieder betritt..." - }, - "instruction": { - "setUpSession": "Erstellen Sie eine Planungssitzung und wählen Sie Ihr bevorzugtes Abstimmungsset aus.

Sie können Ihre User Stories importieren oder JIRA verbinden, um Story Points zu synchronisieren.

Verbindung zum Issue-Tracker

DIVENI kann sich mit Issue-Trackern wie Azure DevOps, JIRA Server und Cloud verbinden, um User Stories anzuzeigen und die abgestimmten Ergebnisse Ihres Planning Pokers zu aktualisieren.", - "inviteYourTeam": "Laden Sie Ihr Team mit QR-Code, Einladungslink oder Code ein.

Jeder Benutzer wird zufällig einem Tier zugewiesen und ist bereit zur Schätzung.

Wenn alle in der Sitzung sind, können Sie mit der Schätzung beginnen. Wenn Sie ein Zeitlimit festgelegt haben, wird dieses als Limit für die Abstimmungszeit verwendet.", - "estimateUserStories": "Jedes Mitglied des Teams kann sein definiertes Set verwenden, um die ausgewählte User Story zu bewerten.

Wenn alle abgestimmt haben, zeigt DIVENI die Ergebnisse und wählt zufällig zwei Wähler aus, die das Minimum / Maximum gewählt haben, um ihre Schätzung zu besprechen.

Nach der Diskussion können Sie die Schätzung wiederholen." } - }, "session": { "prepare": { From 15465e1b4848cb1b78e8365382b50ee6f5a66f81 Mon Sep 17 00:00:00 2001 From: "Papadakis, Charalampos" Date: Mon, 30 Oct 2023 13:41:44 +0100 Subject: [PATCH 3/3] run lint:fix --- frontend/src/App.vue | 115 ++++++++++++------ frontend/src/assets/variables.css | 31 +++-- .../src/components/AnalyticsDataComponent.vue | 88 +++++++------- frontend/src/components/CardSetComponent.vue | 104 ++++++++-------- .../src/components/CopySessionIdPopup.vue | 28 ++++- frontend/src/components/EstimateTimer.vue | 23 ++-- frontend/src/components/JiraComponent.vue | 30 ++--- frontend/src/components/JoinPageCard.vue | 27 ++-- frontend/src/components/LandingPageCard.vue | 10 +- frontend/src/components/MarkdownEditor.vue | 41 +++---- frontend/src/components/MemberVoteCard.vue | 4 +- .../components/ProjectSelectionComponent.vue | 4 +- frontend/src/components/RoundedAvatar.vue | 5 +- frontend/src/components/SessionMemberCard.vue | 2 +- .../SignInWithAzureDevOpsButtonComponent.vue | 9 +- .../SignInWithJiraButtonComponent.vue | 10 +- .../SignInWithJiraCloudButtonComponent.vue | 13 +- .../SignInWithJiraServerButtonComponent.vue | 8 +- .../src/components/StoryPointsComponent.vue | 2 - .../src/components/ThemeToggleComponent.vue | 30 ++--- frontend/src/components/UserStories.vue | 41 ++++--- .../src/components/UserStoryComponent.vue | 2 - .../src/components/UserStoryDescriptions.vue | 21 ++-- .../components/actions/SessionCloseButton.vue | 35 +++--- .../components/actions/SessionLeaveButton.vue | 2 +- .../components/actions/SessionStartButton.vue | 5 +- .../components/navigation/LocaleDropdown.vue | 6 +- .../navigation/TopNavigationBar.vue | 17 +-- frontend/src/services/api.service.ts | 7 +- frontend/src/views/AboutPage.vue | 27 ++-- frontend/src/views/JoinPage.vue | 13 +- frontend/src/views/LandingPage.vue | 32 ++--- frontend/src/views/MemberVotePage.vue | 3 +- frontend/src/views/PrepareSessionPage.vue | 89 +++++++------- frontend/src/views/ResultPage.vue | 23 ++-- frontend/src/views/SessionPage.vue | 61 ++++++---- 36 files changed, 534 insertions(+), 434 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 3d1b12c94..d6641acc8 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -32,26 +32,68 @@ export default Vue.extend({ main { min-height: calc(100vh - 10rem); background: - /* Top */ - radial-gradient( - farthest-corner at 500px 500px, - var(--blurredColour1) 0.1%, - rgba(255, 255, 255, 0) 26% - ), - radial-gradient(farthest-corner at 500px 500px, var(--blurredColour1) 0.1%, rgba(255, 255, 255, 0) 26%), - radial-gradient(farthest-corner at 7% 7%, var(--blurredColour2) 0.1%, rgba(255, 255, 255, 0) 8%), - radial-gradient(farthest-corner at 17% 40px, var(--blurredColour3) 1%, rgba(255, 255, 255, 0) 16%), - radial-gradient(farthest-corner at 17% 40px, var(--blurredColour3) 1%, rgba(255, 255, 255, 0) 16%), - radial-gradient(farthest-corner at 36% 7%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 18%), - radial-gradient(farthest-corner at 36% 7%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 18%), - - /* Bottom */ - radial-gradient(farthest-corner at 95% 42%, var(--blurredColour5) 0.1%, rgba(255, 255, 255, 0) 26%), - radial-gradient(farthest-corner at 0% 58%, var(--blurredColour5) 0.1%, rgba(255, 255, 255, 0) 22%), - radial-gradient(circle farthest-corner at 65% 95%, var(--blurredColour3) 0.1%, rgba(255, 255, 255, 0) 13%), - radial-gradient( farthest-corner at 100% 87%, var(--blurredColour3) 0.1%, rgba(255, 255, 255, 0) 13%), - radial-gradient( farthest-corner at 84% 82%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 13%), - radial-gradient(circle farthest-corner at 84% 82%, var(--blurredColour6) 0.1%, rgba(255, 255, 255, 0) 13%); + /* Top */ radial-gradient( + farthest-corner at 500px 500px, + var(--blurredColour1) 0.1%, + rgba(255, 255, 255, 0) 26% + ), + radial-gradient( + farthest-corner at 500px 500px, + var(--blurredColour1) 0.1%, + rgba(255, 255, 255, 0) 26% + ), + radial-gradient(farthest-corner at 7% 7%, var(--blurredColour2) 0.1%, rgba(255, 255, 255, 0) 8%), + radial-gradient( + farthest-corner at 17% 40px, + var(--blurredColour3) 1%, + rgba(255, 255, 255, 0) 16% + ), + radial-gradient( + farthest-corner at 17% 40px, + var(--blurredColour3) 1%, + rgba(255, 255, 255, 0) 16% + ), + radial-gradient( + farthest-corner at 36% 7%, + var(--blurredColour4) 0.1%, + rgba(255, 255, 255, 0) 18% + ), + radial-gradient( + farthest-corner at 36% 7%, + var(--blurredColour4) 0.1%, + rgba(255, 255, 255, 0) 18% + ), + /* Bottom */ + radial-gradient( + farthest-corner at 95% 42%, + var(--blurredColour5) 0.1%, + rgba(255, 255, 255, 0) 26% + ), + radial-gradient( + farthest-corner at 0% 58%, + var(--blurredColour5) 0.1%, + rgba(255, 255, 255, 0) 22% + ), + radial-gradient( + circle farthest-corner at 65% 95%, + var(--blurredColour3) 0.1%, + rgba(255, 255, 255, 0) 13% + ), + radial-gradient( + farthest-corner at 100% 87%, + var(--blurredColour3) 0.1%, + rgba(255, 255, 255, 0) 13% + ), + radial-gradient( + farthest-corner at 84% 82%, + var(--blurredColour4) 0.1%, + rgba(255, 255, 255, 0) 13% + ), + radial-gradient( + circle farthest-corner at 84% 82%, + var(--blurredColour6) 0.1%, + rgba(255, 255, 255, 0) 13% + ); background-color: var(--background-color-primary); backdrop-filter: blur(5px); color: var(--text-primary-color) !important; @@ -69,18 +111,18 @@ h4 { color: var(--text-primary-color); } /* Landing Page */ -.newSessionCard .landingPageCardButton{ +.newSessionCard .landingPageCardButton { background-color: var(--startButton); border-radius: var(--buttonShape); color: var(--text-primary-color); } -.newSessionCard .landingPageCardButton:hover{ +.newSessionCard .landingPageCardButton:hover { background-color: var(--startButtonHovered); color: var(--text-primary-color); } -.newSessionCard .landingPageCardButton:focus{ +.newSessionCard .landingPageCardButton:focus { background-color: var(--startButtonHovered) !important; } @@ -88,13 +130,13 @@ h4 { background-color: #52173100; /* So the Footer does not overflow */ } -.joinSessionCard .landingPageCardButton{ +.joinSessionCard .landingPageCardButton { background-color: var(--joinButton); border-radius: var(--buttonShape); color: var(--text-primary-color); } -.joinSessionCard .landingPageCardButton:hover{ +.joinSessionCard .landingPageCardButton:hover { background-color: var(--joinButtonHovered); color: var(--text-primary-color); } @@ -122,7 +164,7 @@ h4 { background-color: #52173100; /* So the Footer does not overflow */ } /* Prepare Page */ -.selectedTab { +.selectedTab { background-color: var(--preparePageMainColor) !important; } @@ -189,27 +231,33 @@ a.btn.startButton:focus { background-color: var(--startButtonHovered) !important; } -.btn.dropdown-toggle { /* User Estimation Button */ +.btn.dropdown-toggle { + /* User Estimation Button */ color: var(--text-primary-color); background-color: var(--joinButton); } -.btn.dropdown-toggle:active { /* User Estimation Button hold */ +.btn.dropdown-toggle:active { + /* User Estimation Button hold */ background-color: var(--joinButtonHovered) !important; color: var(--text-primary-color) !important; } -.btn.dropdown-toggle:hover { /* User Estimation Button Hover */ +.btn.dropdown-toggle:hover { + /* User Estimation Button Hover */ background-color: var(--joinButtonHovered); color: var(--text-primary-color); } -.btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { /* User Estimation Button clicked */ +.btn-secondary:not(:disabled):not(.disabled).active, +.show > .btn-secondary.dropdown-toggle { + /* User Estimation Button clicked */ background-color: var(--joinButton) !important; color: var(--text-primary-color) !important; } -.btn-secondary:focus{ /* User Estimation Button after click & add User Story Button on click hold*/ +.btn-secondary:focus { + /* User Estimation Button after click & add User Story Button on click hold*/ background-color: var(--joinButtonHovered) !important; color: var(--text-primary-color) !important; } @@ -227,7 +275,7 @@ a.btn.startButton:focus { border-color: var(--text-primary-color) !important; } /*scrollbar - firefox*/ -:root{ +:root { scrollbar-color: #888 rgba(0, 0, 0, 0) !important; scrollbar-width: thin !important; } @@ -253,7 +301,6 @@ a.btn.startButton:focus { } ::-webkit-scrollbar-corner { - background: rgba(0,0,0,0); + background: rgba(0, 0, 0, 0); } - diff --git a/frontend/src/assets/variables.css b/frontend/src/assets/variables.css index 1a5f6edcc..cab7e4bb0 100644 --- a/frontend/src/assets/variables.css +++ b/frontend/src/assets/variables.css @@ -4,43 +4,42 @@ --blurredColour2: rgba(0, 0, 0, 0.219); --blurredColour3: rgba(216, 125, 6, 0); --blurredColour4: rgba(17, 9, 0, 0); - + /* Bottom */ --blurredColour5: rgba(6, 1, 8, 0.24); --blurredColour6: rgba(80, 80, 80, 0.219); - + /*other basic stuff*/ --accent-color: #cacaca; --text-primary-color: #222; --element-size: 6rem; --buttonShape: 1rem; --linkColor: #254bb3; - + /*Landing Page*/ --startButton: #946234e0; --startButtonHovered: #9c5b1d; - --joinButton: #658462; + --joinButton: #658462; --joinButtonHovered: #4d8a47; - --reconnectButton: #822E1C; + --reconnectButton: #822e1c; --reconnectButtonHovered: #9e2e15; --pictureGradientEnd: rgba(19, 44, 20, 0.5); --landingPageCardsBackground: #e4e4e4; --blurBackGroundColor: rgba(80, 80, 80, 0.219); /*Prepare page*/ - --preparePageMainColor:#946234; + --preparePageMainColor: #946234; --preparePageInActiveTab: #ffffff; - --preparePageInActiveTabHover: #718A6F91; + --preparePageInActiveTabHover: #718a6f91; --preparePageBorderTab: grey; --preparePageImportUserStoriesButton: #30a858; --preparePageActiveCardSet: black; --preparePageInActiveCardSet: #e27712; - --preparePageTimerBackground: #974F0D3D; + --preparePageTimerBackground: #974f0d3d; /*Session Page*/ --textAreaColour: #c3c7bd; --textAreaColourHovered: #c3c7bdb6; - /*other Stuff*/ --topNavigationBarColor: rgba(200, 200, 200, 0.75); --popUpMenu: rgb(143, 143, 143); @@ -65,9 +64,9 @@ --linkColor: #00ffdd; /*Landing Page*/ - --startButton: #13276D; + --startButton: #13276d; --startButtonHovered: #13266dc9; - --joinButton: #42104B; + --joinButton: #42104b; --joinButtonHovered: #42104bb4; --reconnectButton: #033347; --reconnectButtonHovered: #033347bd; @@ -77,19 +76,19 @@ /*Prepare Page*/ - --preparePageMainColor:#13276D; + --preparePageMainColor: #13276d; --preparePageInActiveTab: #666565; - --preparePageInActiveTabHover: #42104B; + --preparePageInActiveTabHover: #42104b; --preparePageBorderTab: white; --preparePageImportUserStoriesButton: #7e5a0c; --preparePageActiveCardSet: white; --preparePageInActiveCardSet: #e27712; - --preparePageTimerBackground: #7EBCC98A; + --preparePageTimerBackground: #7ebcc98a; /*Session Page*/ - --textAreaColour: #A8E8F65C; + --textAreaColour: #a8e8f65c; --textAreaColourHovered: #a8e8f6b9; /*other Stuff*/ --topNavigationBarColor: rgba(34, 34, 34, 0.863); --popUpMenu: rgb(201, 201, 201); -} \ No newline at end of file +} diff --git a/frontend/src/components/AnalyticsDataComponent.vue b/frontend/src/components/AnalyticsDataComponent.vue index b88505d41..fccde5cef 100644 --- a/frontend/src/components/AnalyticsDataComponent.vue +++ b/frontend/src/components/AnalyticsDataComponent.vue @@ -4,69 +4,67 @@ - {{$t('page.landing.meeting.analytics.allCreatedSessionsTitle')}} + {{ $t("page.landing.meeting.analytics.allCreatedSessionsTitle") }}

{{ tweenedOverAllSessions.toFixed(0) }}

-
- {{allSessions}} +
+ {{ allSessions }}
-
+

{{ tweenedOverAllAttendees.toFixed(0) }}

-
- {{allAttendees}} +
+ {{ allAttendees }}
- {{$t('page.landing.meeting.analytics.lastMonthTitle')}} + {{ $t("page.landing.meeting.analytics.lastMonthTitle") }}

{{ tweenedOverAllSessionsFromLastMonth.toFixed(0) }}

-
- {{allSessions}} +
+ {{ allSessions }}
-
+

{{ tweenedOverAllAttendeesFromLastMonth.toFixed(0) }}

-
- {{allAttendees}} +
+ {{ allAttendees }}
- {{$t('page.landing.meeting.analytics.activeTitle')}} + {{ $t("page.landing.meeting.analytics.activeTitle") }}

{{ tweenedCurrentSessions.toFixed(0) }}

-
- {{allSessions}} +
+ {{ allSessions }}
-
+

{{ tweendCurrentAttendees.toFixed(0) }}

-
- {{allAttendees}} +
+ {{ allAttendees }}
-
+
- - diff --git a/frontend/src/components/CardSetComponent.vue b/frontend/src/components/CardSetComponent.vue index 4a99e0672..a0abbde91 100644 --- a/frontend/src/components/CardSetComponent.vue +++ b/frontend/src/components/CardSetComponent.vue @@ -1,40 +1,40 @@