From ee5917affa239d919d650d9129edb79f05348648 Mon Sep 17 00:00:00 2001 From: Faris Demirovic Date: Thu, 28 Nov 2024 22:47:08 +0100 Subject: [PATCH] Change activity bar icon and readme for marketplace --- README.dev.md | 53 ++++++++++++++++++ README.md | 52 +---------------- editor/src/App.css | 38 ------------- editor/src/App.tsx | 4 +- .../ApollonEditorComponent.tsx | 1 + editor/src/index.css | 2 +- media/apollon-icon.svg | 22 ++++++++ media/tum-logo.png | Bin 2543 -> 0 bytes menu/src/App.css | 38 ------------- package.json | 2 +- src/menu-provider.ts | 2 +- 11 files changed, 82 insertions(+), 132 deletions(-) create mode 100644 README.dev.md create mode 100644 media/apollon-icon.svg delete mode 100644 media/tum-logo.png diff --git a/README.dev.md b/README.dev.md new file mode 100644 index 0000000..90494ae --- /dev/null +++ b/README.dev.md @@ -0,0 +1,53 @@ +# A VSCode Extension for the UML Modeling Editor [Apollon](https://github.com/ls1intum/Apollon) + +This is an Visual Studio Code extension for the UML modeling editor Apollon. It enables the developer to model UML diagrams directly within the IDE, save and export diagrams - making it easy to version diagrams with Git as part of the development workflow. + +## Installation + +Install all dependencies + +``` +npm run install:all +``` + +## Development + +### Debug extension + +First, run the menu webview app + +``` +npm run start:menu +``` + +Then, in another terminal tab, run the editor webview app + +``` +npm run start:editor +``` + +Finally, in order to debug the extension in VS Code, press `F5`, or press `Ctrl+Shift+P` and type `Debug: Start Debugging`. + +### Release a new version + +![](.github/media/home_to_release.png) + +1. Go to the GitHub `Releases` in the `apollon-vscode` repository +2. Click on `Draft a new release` + + ![](.github/media/releases_list.png) + +3. Choose as a tag the new version number to release (e.g. tag version `v1.5.0` releases the version `1.5.0`) +4. Let the release notes be auto-generated by clicking `Generate release notes` + + ![](.github/media/create_release.png) + +5. An admin now has to review and accept the new release +6. After the release is approved, GitHub will automatically build and upload the artifact as well as publish the new version to the marketplace. + +The latest plugin artifact is now available on GitHub and via the VS Code marketplace. + +**It might take some time for the latest version to be seen on the marketplace since VS Code still has to review +and approve the changes!** + +![](.github/media/release.gif) diff --git a/README.md b/README.md index 5d5e6d7..ea3cff7 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,3 @@ # A VSCode Extension for the UML Modeling Editor [Apollon](https://github.com/ls1intum/Apollon) -This is an IDE-integrated Visual Studio Code extension for the UML modeling editor Apollon. It enables the developer to model UML diagrams directly within the IDE, save and export diagrams - making it easy to version diagrams with Git as part of the development workflow. - -## Installation - -Install all dependencies - -``` -npm run install:all -``` - -## Development - -### Debug extension - -First, run the menu webview app - -``` -npm run start:menu -``` - -Then, in another terminal tab, run the editor webview app - -``` -npm run start:editor -``` - -Finally, in order to debug the extension in VS Code, press `F5`, or press `Ctrl+Shift+P` and type `Debug: Start Debugging`. - -### Release a new version - -![](.github/media/home_to_release.png) - -1. Go to the GitHub `Releases` in the `apollon-vscode` repository -2. Click on `Draft a new release` - - ![](.github/media/releases_list.png) - -3. Choose as a tag the new version number to release (e.g. tag version `v1.5.0` releases the version `1.5.0`) -4. Let the release notes be auto-generated by clicking `Generate release notes` - - ![](.github/media/create_release.png) - -5. An admin now has to review and accept the new release -6. After the release is approved, GitHub will automatically build and upload the artifact as well as publish the new version to the marketplace. - -The latest plugin artifact is now available on GitHub and via the VS Code marketplace. - -**It might take some time for the latest version to be seen on the marketplace since VS Code still has to review -and approve the changes!** - -![](.github/media/release.gif) +This is an Visual Studio Code extension for the UML modeling editor Apollon. It enables the developer to model UML diagrams directly within the IDE, save and export diagrams - making it easy to version diagrams with Git as part of the development workflow. diff --git a/editor/src/App.css b/editor/src/App.css index 74b5e05..e69de29 100644 --- a/editor/src/App.css +++ b/editor/src/App.css @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/editor/src/App.tsx b/editor/src/App.tsx index 50f343c..069161e 100644 --- a/editor/src/App.tsx +++ b/editor/src/App.tsx @@ -33,10 +33,10 @@ function App() { return ( <>
- + Save - + Export as SVG
diff --git a/editor/src/components/apollon-editor-component/ApollonEditorComponent.tsx b/editor/src/components/apollon-editor-component/ApollonEditorComponent.tsx index fe15299..8626da6 100644 --- a/editor/src/components/apollon-editor-component/ApollonEditorComponent.tsx +++ b/editor/src/components/apollon-editor-component/ApollonEditorComponent.tsx @@ -10,6 +10,7 @@ const ApollonContainer = styled.div` flex-direction: column; overflow: hidden; background-color: var(--apollon-background); + min-height: calc(100vh - 3rem); `; export const ApollonEditorComponent: React.FC = () => { diff --git a/editor/src/index.css b/editor/src/index.css index aa6366b..e158201 100644 --- a/editor/src/index.css +++ b/editor/src/index.css @@ -33,7 +33,7 @@ body { .app-bar { width: 100%; background: var(--vscode-activityBar-background); - padding: 1rem 0; + height: 3rem; display: flex; justify-content: flex-start; } diff --git a/media/apollon-icon.svg b/media/apollon-icon.svg new file mode 100644 index 0000000..cb4b943 --- /dev/null +++ b/media/apollon-icon.svg @@ -0,0 +1,22 @@ + + apollon-icon + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/media/tum-logo.png b/media/tum-logo.png deleted file mode 100644 index 1f8849d0e121c0984bf1547ae23664768487ffc5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2543 zcmeHJiBFRU6#qCT$jvZ96^mj)5zDC{vw#RFAGeI54p!81M3CZIt^xvr!YUQ!$GDG* zBpAmfAe5Uq&eBpq#^K6Mp`t)(p&TvPm1O%PW_-!Z`{m`Ayu6q9dwE26*Q<(hN8|ti zPy`+9JODt_762r)WebEyI2^q1a1##z@@o4o0pt~Eh;zlDosDNy!3uK-t9f0b zn;W`v4jlg0^P%ja(;j+*Pvl@k{Z9SuG#PHmwoSBDoCH=yUDofQP3jqy;|Mz)&&RsO zckdXg2U1)Ok6dovT%~UbLH(=PI*VGw?g2?1xXz9X zM1gj9H@4R%k?HJrnwo_Z4!jbCwF@qX#bh2+HL`!%lR|F(;d6E??Xx@pMC58n0>2Ya z0MGOO-#`#X3sDAuhS)nFmP!xX(VRo+WP4gf%~8$J;fXk5$eIO8%J`fXQYMBL@n@y+ zR!&7Q6aI&i_q`ZE^zzlyt=gdXt`R91Y##aTp`KV+tkS?OHRFvG#g?A>@@!>w5Uaa$ z8Df@MyS*nsBE(K46a&I50@%-lCTt?8$JZTS)q-H}cS=FIv z#<=hO5i3U?g+$PSjf5(EuxQS3t>WR zA6vl67^}&Lv3of>JFcCBrp(UA+zN5?W@k;k+~5JRQqh)}#0ij>=^T@YV&tr~yYOg; zcMhVHS_O+sGaLT|qNYy@4J9#`UTw(7FwJKv5!xwtPs*U)W#VIg$CmU*k zSUs?78$2_aItd!d@KL)PFBQS@d$i2=DUWs`OjmHEQI5PWL}+E4s1D&fHTt|XK+QO; z>EYIRmOoSg*D_E}bA|i+gmD7@RyzsHm=|{vxJ=%{{Y<;-I4Yb?LQMDGn6naXh>jVI z+=SwF2ch=2re(M?v};M_xTY&lqgNrzaN#7EE(=v^W&M0O9J)2iDn>x7avjvk9IMbx&;*&ppoa z@u8uL{KtJ;7vF^DWbx$&(cLY1!s-Tc>Pmr=Q90!<<8WhCa>#1WhbzQld2_ESi&))M z5*Tl}9+iM?4P8`;aAroM`!`=SH9dY~6-i%s(G+(h`lHBW`{qO+3a-%Zfp1s~?Tdal zumJoRpE?;o_j#Lz;yQOvc&+4=rn5)tWpLC@lXeTrRH=oxUs0rm!Q_Op!eVV_AwAd| zFzC=EW17S6{G!Kokx6)}W(!<8Z!8UXeg$8L@C9xHv)UO~zhdK4!#6XaSgItvRJFa& zXJnw9c|-d;VL&Jc-f2v}LP-Iob@6n)z z6K_U*C{R=WM1PE?-o1P!@s(MwWgv4`6gX>^h5vz`r zX_Qci5VKYmw3FL1xySj0E7JW7Uhf3Ams&}(O@$*!n}nbC2}l#kSug0KH(Vab9WcK( z9{wrbew4ummNoZvjn7x8?EXuOG^2KG SRU`fw006XiwX3{*EAb!Fo1A_C diff --git a/menu/src/App.css b/menu/src/App.css index 74b5e05..e69de29 100644 --- a/menu/src/App.css +++ b/menu/src/App.css @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/package.json b/package.json index 2c221d7..f77c5d2 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ { "id": "apollon", "title": "Apollon", - "icon": "media/tum-logo.png" + "icon": "media/apollon-icon.svg" } ] }, diff --git a/src/menu-provider.ts b/src/menu-provider.ts index 2fc91b6..c60f977 100644 --- a/src/menu-provider.ts +++ b/src/menu-provider.ts @@ -152,7 +152,7 @@ export default class MenuProvider implements vscode.WebviewViewProvider { } else { this.editorPanel = vscode.window.createWebviewPanel( "editor", - name, + `${name} (Editor view)`, vscode.ViewColumn.One, { enableScripts: true,