Skip to content
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.

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

Doc/create doc #46

Merged
merged 3 commits into from
Nov 26, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
105 changes: 105 additions & 0 deletions docs/code_customization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
# UI customization

This project is based on [Bitwarden Mobile](https://github.com/bitwarden/mobile) and comes with its specific UI

Some part of this project may have been reworked by Cozy to implement new features or to modify behavior of existing ones

To make those modifications more tracable, a code documentation pattern may be used

## How to comment customization

Always precede customized code with a comment that explains why the customization has been made

Exemple of commented customization in C#:

```cs
// Cozy customization, modify "XXX" functionality
// We did this because of that
SomeCozyOverride();
```

The only mandatory text is `// Cozy Customization`. This would ease future searches in the code in order to find all customizations

:warning: some old customizations do not have this comment format. So searches may not find all historic customizations. If you find those old customization, please fix them by adding the new comment format

## How to comment deleted code

In order to avoid conflicts on future merge upstreams, we should never delete Bitwarden code

Instead we should surround it by block comments tags

Also we should always comment why a specific block has been deactivated

Exemple of deleted code in C#:

```cs
// Cozy customization, disable "XXX" functionality
// We did this because of that
/*
SomeBitwardenMethod();
AnotherBitwardenMethod();
//*/
```

With this way of commenting code has been: the original Bitwarden is kept untouched (indentation should also stay the same) and future merge upstreams will not trigger merge conflicts on those lines

Also it is easy to reactivate a block of code for testing purpose just by adding a `/` before block comment tag

```cs
// Cozy customization, disable "XXX" functionality
// We did this because of that
//*
SomeBitwardenMethod();
AnotherBitwardenMethod();
//*/
```

The same pattern should be used on `xml` resources:

```xml
<!--
Cozy customisation: disable "XXX" functionality
We did this because of that
-->
<!--
<SomeXMLTag>
<SomeXMLChildTag>SomeText</SomeXMLChildTag>
</SomeXMLTag>
-->
```

However there is no way to easily switch XML blocks comment. Those should be deleted when tests are done

## How to replace code by another

The same way we don't want to edit deleted code, we don't want to edit big chunk of codes too much

When this is needed two option are available:
- edit the code and precede each modified line by a comment
- create a whold new chunk of code will all edits and comment the previous one

Exemple of replaced chunk in C# using code comment switch structure

```cs
// Cozy customization, replace "XXX" functionality
// We did this because of that
//*
SomeCozyOverride();
/*/
SomeBitwardenCode();
//*/
```

With this way of commenting code has been: the original Bitwarden is kept untouched (indentation should also stay the same) and future merge upstreams will not trigger merge conflicts on those lines

Also it is easy to reactivate a block of code for testing purpose just by removing the first `/` from the block comment tag

```cs
// Cozy customization, replace "XXX" functionality
// We did this because of that
/*
SomeCozyOverride();
/*/
SomeBitwardenCode();
//*/
```
51 changes: 51 additions & 0 deletions docs/dev.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Building the solution

This project is based on [Bitwarden Mobile](https://github.com/bitwarden/mobile) and comes with its own build configurations (`Debug`, `Release`, `FDroid`, `Ad-Hoc`, `AppStore`)

However some edits have been made by Cozy and so we had to modify Bitwarden's build configurations. We made new build configurations that allow us to know which platform (iOS or ANdroid) we are building for, even in `.Net Standard` libraries like `App.csproj`

Those new build configurations are `CozyDebugIOS`, `CozyDebugAndroid`, `CozyReleaseIOS`, `CozyReleaseAndroid`

Native Bitwarden's build configurations are not maintained by Cozy and may not work correctly

Only Cozy's build configurations should be used in this project

## Debug on iOS

In order to debug on iOS:
- Run `iOS.csproj` using `CozyDebugIOS|iPhoneSimulator` or `CozyDebugIOS|iPhone` regarding if you are using a simulator or a real device

## Release on iOS

In order to release on iOS:
- Run `iOS.csproj` using `CozyReleaseIOS|iPhone`

## Debug on Android

In order to debug on Android:
- Run `Android.csproj` using `CozyDebugAndroid|Any CPU` (or just `CozyReleaseAndroid` on `Visual Studio for Mac`)

## Release on Android

In order to debug on Android:
- Run `Android.csproj` using `CozyReleaseAndroid|Any CPU` (or just `CozyReleaseAndroid` on `Visual Studio for Mac`)

# How to handle reference to `Xamarin.iOS.dll`

In Cozy project, we chose to use a native Safari webview for user registration process

To make this possible, we had to import `Xamarin.iOS.dll` which is a iOS native DLL. Therefore it should not be used in Android builds. This is why we made new build configurations ([Building the solution](DEV.md#building-the-solution))

This DLL is imported into `src\App\App.csproj` by using an absolute path

On OSX, this absolute path is independant of VS version nor OSX version

On Windows, this absolute path is dependant of VS version. So we added a conditional `<Reference>` in MSBuild configuration

```xml
<Reference Include="Xamarin.iOS" Condition=" '$(OS)' == 'Windows_NT' AND '$(VisualStudioVersion)' == '16.0' ">
<HintPath>C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\ReferenceAssemblies\Microsoft\Framework\Xamarin.iOS\v1.0\Xamarin.iOS.dll</HintPath>
</Reference>
```

Current configuration (11/2020) is made for Visual Studio 2019. To make this work in future Visual Studio releases, please duplicate this conditional `<Reference>` and adapt `$(VisualStudioVersion)` and `<HintPath>` with expected values.
40 changes: 40 additions & 0 deletions docs/ui_customization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# UI customization

This project is based on [Bitwarden Mobile](https://github.com/bitwarden/mobile) and comes with its specific UI

This project has been rebranded using Cozy's colors, logos and texts

This document explains how maintain those modifications

## Cozy Theme

Cozy theme is handled by two files:
- `src\App\Utilities\ThemeManager.cs`
- `src\Android\Utilities\ThemeHelpers.cs`
- `src\App\Styles\Cozy.xaml`
- `src\Android\Resources\values\colors.xml`
- `src\Android\Resources\values\styles.xml`

This list may change in the future, consider it as a hint but not as a single source of trust

## Vector Drawables

Many images and logos are embedded in the projet as `Vector Drawables` instead of classic `png` files

`Vector Drawable` is an Android specific file format that allows to describe pictures as vector graphics. Its extension is `.xml`

This format is similar to SVG so you can easily edit a `Vector Drawable` if you have SVG knowledge

Visual Studio does not support previewing `Vector Drawables`, so Android Studio may be used instead

Another option is to load them into [ShapeShifter](https://shapeshifter.design/) online tool

In order to export pictures from Cozy specifications, two options are available:
- Install [Android Vector Drawable plugin](https://www.figma.com/community/plugin/797369763563831541/Android-Vector-Drawable) on Figma and use it to export pictures
- Export picutres as usual using SVG, import them in [ShapeShifter](https://shapeshifter.design/) and export them as `Vector Drawable`

## Folder `cozy-customization`

`cozy-customization` contains some tools to ease Cozy customization

Those tools are not used anymore