Change activity bar icon and readme for marketplace

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)

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.

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);
-  }
-}

editor/src/App.tsx

@@ -33,10 +33,10 @@ function App() {
   return (
     <>
       <div className="app-bar">
-        <VSCodeButton className="mx-3" onClick={saveDiagram}>
+        <VSCodeButton className="m-3" onClick={saveDiagram}>
           Save
         </VSCodeButton>
-        <VSCodeButton className="mx-3" onClick={exportDiagram}>
+        <VSCodeButton className="m-3" onClick={exportDiagram}>
           Export as SVG
         </VSCodeButton>
       </div>

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 = () => {

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;
 }

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);
-  }
-}

package.json

@@ -34,7 +34,7 @@
         {
           "id": "apollon",
           "title": "Apollon",
-          "icon": "media/tum-logo.png"
+          "icon": "media/apollon-icon.svg"
         }
       ]
     },

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,