Merge pull request #651 from owncloud/phoenix-update

Phoenix update
2026-01-06 04:09:40 -06:00 · 2020-10-06 12:54:31 +02:00
parent af3b8a7337 cbad8d2a39
commit 6a19773b1b
18 changed files with 122 additions and 142 deletions
--- a/.drone.star
+++ b/.drone.star
@@ -20,7 +20,7 @@ config = {
  },
  'uiTests': {
    'phoenixBranch': 'master',
-    'phoenixCommit': '3204f23746b1e958ef9eb38464949ef8107e9b1f',
+    'phoenixCommit': '42c2a372aceb31eb17e13ebae08e2e25e2447dfe',
    'suites': {
      'phoenixWebUI1': [
        'webUICreateFilesFolders',
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,7 @@
 /hugo
 *.key
 *crt
+node_modules/
+/*/assets

-.idea
+.idea
--- a/accounts/pkg/assets/embed.go
+++ b/accounts/pkg/assets/embed.go
--- a/accounts/ui/components/accounts/AccountsBatchActions.vue
+++ b/accounts/ui/components/accounts/AccountsBatchActions.vue
@@ -119,7 +119,7 @@ export default {

 <style lang="scss" scoped>
 .tmp-alert-fixes {
-  padding: 4px 10px !important;
+  padding: 4px 11px 5px !important;
  border-radius: 3px !important;
  background-color: #fff !important;
  border: 1px solid rgb(224, 0, 0) !important;
--- a/accounts/ui/components/accounts/AccountsCreate.vue
+++ b/accounts/ui/components/accounts/AccountsCreate.vue
@@ -47,13 +47,13 @@
          variation="primary"
          :disabled="isRequestInProgress"
          @click="createAccount"
+          gap-size="small"
          :class="{ 'border-ods-tmp-fix': !isRequestInProgress }"
        >
          <oc-spinner
            v-if="isRequestInProgress"
            key="account-creation-in-progress"
-            size="xsmall"
-            class="uk-margin-xsmall-right"
+            size="small"
            aria-hidden="true"
          />
          <span v-text="isRequestInProgress ? $gettext('Creating') : $gettext('Create')" />
@@ -65,10 +65,11 @@
        <oc-button
          id="accounts-new-account-trigger"
          key="create-accounts-button"
-          icon="add"
          variation="primary"
+          gap-size="small"
          @click="setFormInProgress(true)"
        >
+          <oc-icon name="add" />
          <translate>Create new account</translate>
        </oc-button>
      </div>
--- a/accounts/ui/components/accounts/AccountsList.vue
+++ b/accounts/ui/components/accounts/AccountsList.vue
@@ -3,13 +3,13 @@
    <oc-table middle divider>
      <oc-table-group>
        <oc-table-row class="fix-table-header">
-          <oc-table-cell shrink type="head">
+          <oc-table-cell shrink type="head" class="uk-text-center">
            <oc-checkbox
-              :value="areAllAccountsSelected"
-              :label="$gettext('Select all users')"
-              hide-label
-              @change="toggleSelectionAll"
-              class="uk-margin-small-left"
+                class="oc-ml-s"
+                :value="areAllAccountsSelected"
+                @input="toggleSelectionAll"
+                :label="$gettext('Select all users')"
+                hide-label
            />
          </oc-table-cell>
          <oc-table-cell shrink type="head" />
--- a/accounts/ui/components/accounts/AccountsListRow.vue
+++ b/accounts/ui/components/accounts/AccountsListRow.vue
@@ -2,10 +2,13 @@
  <oc-table-row>
    <oc-table-cell>
      <oc-checkbox
-        class="uk-margin-small-left"
-        :value="isAccountSelected"
-        @change="TOGGLE_SELECTION_ACCOUNT(account)"
-        :label="selectAccountLabel" hide-label
+        class="oc-ml-s"
+        size="large"
+        :value="selectedAccounts"
+        :option="account"
+        @input="TOGGLE_SELECTION_ACCOUNT(account)"
+        :label="selectAccountLabel"
+        hide-label
      />
    </oc-table-cell>
    <oc-table-cell>
@@ -30,16 +33,13 @@
      >
        <ul class="uk-list">
          <li v-for="role in roles" :key="role.id">
-            <label class="accounts-roles-dropdown-role">
-              <input
-                type="radio"
-                class="oc-radiobutton"
-                v-model="currentRole"
-                :value="role"
-                @change="changeRole(role.id)"
-              />
-              {{ role.displayName }}
-            </label>
+            <oc-radio
+              class="accounts-roles-dropdown-role"
+              v-model="currentRole"
+              :option="role"
+              @input="changeRole(role.id)"
+              :label="role.displayName"
+            />
          </li>
        </ul>
      </oc-drop>
@@ -95,10 +95,6 @@ export default {
    ...mapGetters(['user', 'configuration']),
    ...mapState('Accounts', ['roles', 'selectedAccounts']),

-    isAccountSelected () {
-      return this.selectedAccounts.indexOf(this.account) > -1
-    },
-
    selectAccountLabel () {
      const translated = this.$gettext('Select %{ account }')

--- a/changelog/unreleased/phoenix-0.18.0.md
+++ b/changelog/unreleased/phoenix-0.18.0.md
@@ -0,0 +1,7 @@
+Change: Update phoenix to v0.18.0
+
+We updated phoenix to v0.18.0. Please refer to the changelog (linked) for details on the phoenix release. With the ODS release brought in by phoenix we now have proper oc-checkbox and oc-radio components for the settings and accounts UI.
+
+https://github.com/owncloud/ocis/pull/651
+https://github.com/owncloud/phoenix/releases/tag/v0.18.0
+https://github.com/owncloud/owncloud-design-system/releases/tag/v1.12.1
--- a/ocis-phoenix/Makefile
+++ b/ocis-phoenix/Makefile
@@ -3,7 +3,7 @@ NAME := ocis-phoenix
 IMPORT := github.com/owncloud/ocis/$(NAME)
 BIN := bin
 DIST := dist
-PHOENIX_ASSETS_VERSION = v0.17.0
+PHOENIX_ASSETS_VERSION = v0.18.0

 ifeq ($(OS), Windows_NT)
 	EXECUTABLE := $(NAME).exe
--- a/ocis-phoenix/pkg/assets/embed.go
+++ b/ocis-phoenix/pkg/assets/embed.go
--- a/ocis/go.sum
+++ b/ocis/go.sum
@@ -157,6 +157,7 @@ github.com/asaskevich/govalidator v0.0.0-20180720115003-f9ffefc3facf/go.mod h1:l
 github.com/asaskevich/govalidator v0.0.0-20190424111038-f61b66f89f4a/go.mod h1:lB+ZfQJz7igIIfQNfa7Ml4HSf2uFQQRzpGGRXenZAgY=
 github.com/asaskevich/govalidator v0.0.0-20200108200545-475eaeb16496 h1:zV3ejI06GQ59hwDQAvmK1qxOQGB3WuVTRoY0okPTAv0=
 github.com/asaskevich/govalidator v0.0.0-20200108200545-475eaeb16496/go.mod h1:oGkLhpf+kjZl6xBf758TQhh5XrAeiJv/7FRz/2spLIg=
+github.com/asaskevich/govalidator v0.0.0-20200428143746-21a406dcc535 h1:4daAzAu0S6Vi7/lbWECcX0j45yZReDZ56BQsrVBOEEY=
 github.com/asaskevich/govalidator v0.0.0-20200428143746-21a406dcc535/go.mod h1:oGkLhpf+kjZl6xBf758TQhh5XrAeiJv/7FRz/2spLIg=
 github.com/ascarter/requestid v0.0.0-20170313220838-5b76ab3d4aee h1:3T/l+vMotQ7cDSLWNAn2Vg1SAQ3mdyLgBWWBitSS3uU=
 github.com/ascarter/requestid v0.0.0-20170313220838-5b76ab3d4aee/go.mod h1:u7Wtt4WATGGgae9mURNGQQqxAudPKrxfsbSDSGOso+g=
@@ -331,6 +332,7 @@ github.com/cs3org/reva v1.2.1-0.20200826162318-c0f54e1f37ea h1:xVyJvR+GoaBrRJV6G
 github.com/cs3org/reva v1.2.1-0.20200826162318-c0f54e1f37ea/go.mod h1:FvYB+UPpuPCw0hH42qHVR1R2atZyy69METZI/zEaST8=
 github.com/cs3org/reva v1.2.1-0.20200911111727-51649e37df2d h1:vohUfrOZVrbbzt7JUICBDX8rjcedLbuEsmuOJtx8mWY=
 github.com/cs3org/reva v1.2.1-0.20200911111727-51649e37df2d/go.mod h1:Q1/JB40ZKtlhZUxz+ZqB/O/VlrnQX//NYdPPRPsP0UE=
+github.com/cs3org/reva v1.2.2-0.20200924071957-e6676516e61e h1:khITGSnfDXtByQsLezoXgocUgGHJBBn0BPsUihGvk7w=
 github.com/cs3org/reva v1.2.2-0.20200924071957-e6676516e61e/go.mod h1:DOV5SjpOBKN+aWfOHLdA4KiLQkpyC786PQaXEdRAZ0M=
 github.com/cznic/b v0.0.0-20181122101859-a26611c4d92d h1:SwD98825d6bdB+pEuTxWOXiSjBrHdOl/UVp75eI7JT8=
 github.com/cznic/b v0.0.0-20181122101859-a26611c4d92d/go.mod h1:URriBxXwVq5ijiJ12C7iIZqlA69nTlI+LgI6/pwftG8=
@@ -811,6 +813,7 @@ github.com/grpc-ecosystem/go-grpc-middleware v1.1.0/go.mod h1:f5nM7jw/oeRSadq3xC
 github.com/grpc-ecosystem/go-grpc-middleware v1.2.0/go.mod h1:mJzapYve32yjrKlk9GbyCZHuPgZsrbyIbyKhSzOpg6s=
 github.com/grpc-ecosystem/go-grpc-middleware v1.2.1 h1:V59tBiPuMkySHwJkuq/OYkK0WnOLwCwD3UkTbEMr12U=
 github.com/grpc-ecosystem/go-grpc-middleware v1.2.1/go.mod h1:EaizFBKfUKtMIF5iaDEhniwNedqGo9FuLFzppDr3uwI=
+github.com/grpc-ecosystem/go-grpc-middleware v1.2.2 h1:FlFbCRLd5Jr4iYXZufAvgWN6Ao0JrI5chLINnUXDDr0=
 github.com/grpc-ecosystem/go-grpc-middleware v1.2.2/go.mod h1:EaizFBKfUKtMIF5iaDEhniwNedqGo9FuLFzppDr3uwI=
 github.com/grpc-ecosystem/go-grpc-prometheus v1.2.0 h1:Ovs26xHkKqVztRpIrF/92BcuyuQ/YW4NSIpoGtfXNho=
 github.com/grpc-ecosystem/go-grpc-prometheus v1.2.0/go.mod h1:8NvIoxWQoOIhqOTXgfV/d3M/q6VIi02HzZEHgUlZvzk=
@@ -1230,6 +1233,7 @@ github.com/ory/fosite v0.30.2/go.mod h1:Lq9qQ9Sl6mcea2Tt8J7PU+wUeFYPZ+vg7N3zPVKG
 github.com/ory/fosite v0.30.4/go.mod h1:Lq9qQ9Sl6mcea2Tt8J7PU+wUeFYPZ+vg7N3zPVKGbN8=
 github.com/ory/fosite v0.32.2 h1:iRV495P/9EyoYQ8qEHYxFQeeYCdDFawqjAML+qiMF9s=
 github.com/ory/fosite v0.32.2/go.mod h1:UeBhRgW6nAjTcd8S7kAo0IFsY/rTPyOXPq/t8N20Q8I=
+github.com/ory/fosite v0.33.0 h1:tK+3Luazv4vIBJY3uagOBryAQ3IG3cs6kfo8piGBhAY=
 github.com/ory/fosite v0.33.0/go.mod h1:h+ize9gk0GvRyGjabriqSEmTkMhny+O95cijb8DVqPE=
 github.com/ory/go-acc v0.0.0-20181118080137-ddc355013f90/go.mod h1:sxnvPCxChFuSmTJGj8FdMupeq1BezCiEpDjTUXQ4hf4=
 github.com/ory/go-acc v0.2.1 h1:Pwcmwd/cSnwJsYN76+w3HU7oXeWFTkwj/KUj1qGDrVw=
@@ -1347,6 +1351,7 @@ github.com/pelletier/go-toml v1.2.0/go.mod h1:5z9KED0ma1S8pY6P1sdut58dfprrGBbd/9
 github.com/pelletier/go-toml v1.4.0/go.mod h1:PN7xzY2wHTK0K9p34ErDQMlFxa51Fk0OUruD3k1mMwo=
 github.com/pelletier/go-toml v1.6.0 h1:aetoXYr0Tv7xRU/V4B4IZJ2QcbtMUFoNb3ORp7TzIK4=
 github.com/pelletier/go-toml v1.6.0/go.mod h1:5N711Q9dKgbdkxHL+MEfF31hpT7l0S0s/t2kKREewys=
+github.com/pelletier/go-toml v1.8.0 h1:Keo9qb7iRJs2voHvunFtuuYFsbWeOBh8/P9v/kVMFtw=
 github.com/pelletier/go-toml v1.8.0/go.mod h1:D6yutnOGMveHEPV7VQOuvI/gXY61bv+9bAOTRnLElKs=
 github.com/philhofer/fwd v1.0.0 h1:UbZqGr5Y38ApvM/V/jEljVxwocdweyH+vmYvRPBnbqQ=
 github.com/philhofer/fwd v1.0.0/go.mod h1:gk3iGcWd9+svBvR0sR+KPcfE+RNWozjowpeBVG3ZVNU=
@@ -1440,6 +1445,7 @@ github.com/rs/zerolog v1.17.2/go.mod h1:9nvC1axdVrAHcu/s9taAVfBuIdTZLVQmKQyvrUjF
 github.com/rs/zerolog v1.18.0/go.mod h1:9nvC1axdVrAHcu/s9taAVfBuIdTZLVQmKQyvrUjF5+I=
 github.com/rs/zerolog v1.19.0 h1:hYz4ZVdUgjXTBUmrkrw55j1nHx68LfOKIQk5IYtyScg=
 github.com/rs/zerolog v1.19.0/go.mod h1:IzD0RJ65iWH0w97OQQebJEvTZYvsCUm9WVLWBQrJRjo=
+github.com/rs/zerolog v1.20.0 h1:38k9hgtUBdxFwE34yS8rTHmHBa4eN16E4DJlv177LNs=
 github.com/rs/zerolog v1.20.0/go.mod h1:IzD0RJ65iWH0w97OQQebJEvTZYvsCUm9WVLWBQrJRjo=
 github.com/rubenv/sql-migrate v0.0.0-20190212093014-1007f53448d7/go.mod h1:WS0rl9eEliYI8DPnr3TOwz4439pay+qNgzJoVya/DmY=
 github.com/russellhaering/goxmldsig v0.0.0-20180430223755-7acd5e4a6ef7 h1:J4AOUcOh/t1XbQcJfkEqhzgvMJ2tDxdCVvmHxW5QXao=
@@ -1920,6 +1926,7 @@ golang.org/x/sys v0.0.0-20200523222454-059865788121/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20200602225109-6fdc65e7d980/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200615200032-f1bc736245b1 h1:ogLJMz+qpzav7lGMh10LMvAkM/fAoGlaiiHYiFYdm80=
 golang.org/x/sys v0.0.0-20200615200032-f1bc736245b1/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200720211630-cb9d2d5c5666 h1:gVCS+QOncANNPlmlO1AhlU3oxs4V9z+gTtPwIk3p2N8=
 golang.org/x/sys v0.0.0-20200720211630-cb9d2d5c5666/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200803210538-64077c9b5642/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200826173525-f9321e4c35a6 h1:DvY3Zkh7KabQE/kfzMvYvKirSiguP9Q/veMtkYyf0o8=
@@ -2158,6 +2165,7 @@ gopkg.in/ini.v1 v1.44.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/ini.v1 v1.51.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/ini.v1 v1.51.1 h1:GyboHr4UqMiLUybYjd22ZjQIKEJEpgtLXtuGbR21Oho=
 gopkg.in/ini.v1 v1.51.1/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
+gopkg.in/ini.v1 v1.57.0 h1:9unxIsFcTt4I55uWluz+UmL95q4kdJ0buvQ1ZIqVQww=
 gopkg.in/ini.v1 v1.57.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/jcmturner/aescts.v1 v1.0.1/go.mod h1:nsR8qBOg+OucoIW+WMhB3GspUQXq9XorLnQb9XtvcOo=
 gopkg.in/jcmturner/dnsutils.v1 v1.0.1/go.mod h1:m3v+5svpVOhtFAP/wSz+yzh4Mc0Fg7eRhxkJMWSIz9Q=
@@ -2181,6 +2189,7 @@ gopkg.in/square/go-jose.v2 v2.4.0/go.mod h1:M9dMgbHiYLoDGQrXy7OpJDJWiKiU//h+vD76
 gopkg.in/square/go-jose.v2 v2.4.1/go.mod h1:M9dMgbHiYLoDGQrXy7OpJDJWiKiU//h+vD76mk0e1AI=
 gopkg.in/square/go-jose.v2 v2.5.0 h1:OZ4sdq+Y+SHfYB7vfthi1Ei8b0vkP8ZPQgUfUwdUSqo=
 gopkg.in/square/go-jose.v2 v2.5.0/go.mod h1:M9dMgbHiYLoDGQrXy7OpJDJWiKiU//h+vD76mk0e1AI=
+gopkg.in/square/go-jose.v2 v2.5.1 h1:7odma5RETjNHWJnR32wx8t+Io4djHE1PqxCFx3iiZ2w=
 gopkg.in/square/go-jose.v2 v2.5.1/go.mod h1:M9dMgbHiYLoDGQrXy7OpJDJWiKiU//h+vD76mk0e1AI=
 gopkg.in/src-d/go-billy.v4 v4.3.2/go.mod h1:nDjArDMp+XMs1aFAESLRjfGSgfvoYN0hDfzEk0GjC98=
 gopkg.in/src-d/go-git-fixtures.v3 v3.5.0/go.mod h1:dLBcvytrw/TYZsNTWCnkNF2DSIlzWYqTe3rJR56Ac7g=
--- a/settings/pkg/assets/embed.go
+++ b/settings/pkg/assets/embed.go
--- a/settings/ui/components/SettingsApp.vue
+++ b/settings/ui/components/SettingsApp.vue
@@ -1,38 +1,40 @@
 <template>
-  <div>
-    <div v-if="initialized" class="uk-width-3-4@m uk-container uk-padding">
-      <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
-        <p class="uk-flex uk-flex-middle">
-          <oc-icon name="info" class="uk-margin-xsmall-right" />
-          <translate>No settings available</translate>
-        </p>
-      </oc-alert>
-      <template v-else>
-        <template v-if="selectedExtensionName">
-          <div class="uk-flex uk-flex-between uk-flex-middle">
-            <h1 class="oc-page-title">
-              {{ selectedExtensionName }}
-            </h1>
+  <div class="oc-p">
+    <div class="uk-flex uk-flex-column" id="settings-app">
+      <template v-if="initialized">
+        <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
+          <p class="uk-flex uk-flex-middle">
+            <oc-icon name="info" class="oc-mr-s" />
+            <translate>No settings available</translate>
+          </p>
+        </oc-alert>
+        <template v-else>
+          <template v-if="selectedExtensionName">
+            <div class="uk-flex uk-flex-between uk-flex-middle">
+              <h1 class="oc-page-title">
+                {{ selectedExtensionName }}
+              </h1>
+            </div>
+            <hr />
+          </template>
+          <template v-if="settingsValuesLoaded">
+            <settings-bundle
+              v-for="bundle in selectedBundles"
+              :key="'bundle-' + bundle.id"
+              :bundle="bundle"
+              class="oc-mt"
+            />
+          </template>
+          <div class="oc-mt" v-else>
+            <oc-loader :aria-label="$gettext('Loading personal settings')" />
+            <oc-alert :aria-hidden="true" varition="primary" no-close>
+              <p v-translate>Loading personal settings...</p>
+            </oc-alert>
          </div>
-          <hr />
        </template>
-        <template v-if="settingsValuesLoaded">
-          <settings-bundle
-            v-for="bundle in selectedBundles"
-            :key="'bundle-' + bundle.id"
-            :bundle="bundle"
-            class="uk-margin-top"
-          />
-        </template>
-        <div class="uk-margin-top" v-else>
-          <oc-loader :aria-label="$gettext('Loading personal settings')" />
-          <oc-alert :aria-hidden="true" varition="primary" no-close>
-            <p v-translate>Loading personal settings...</p>
-          </oc-alert>
-        </div>
      </template>
+      <oc-loader v-else />
    </div>
-    <oc-loader v-else />
  </div>
 </template>

--- a/settings/ui/components/SettingsBundle.vue
+++ b/settings/ui/components/SettingsBundle.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="uk-width-1-1 uk-width-2-3@m uk-width-1-2@l">
-    <div class="uk-text-bold uk-margin-small-bottom">
+  <div class="uk-width-1-1 uk-width-2-3@m uk-width-1-2@l uk-width-1-3@xl">
+    <div class="oc-text-bold oc-mb-s">
      <translate>{{ bundle.displayName }}</translate>
    </div>
    <oc-grid gutter="small">
--- a/settings/ui/components/settings/SettingMultiChoice.vue
+++ b/settings/ui/components/settings/SettingMultiChoice.vue
@@ -1,12 +1,13 @@
 <template>
  <div>
-    <oc-button :id="buttonElementId" class="uk-width-expand">
+    <oc-button :id="buttonElementId" class="uk-width-expand" justify-content="space-between">
      <span v-if="selectedOptions !== null && selectedOptions.length > 0">
        {{ selectedOptionsDisplayValues }}
      </span>
      <span v-else>
        {{ setting.placeholder || $gettext('Please select') }}
      </span>
+      <oc-icon name="expand_more" />
    </oc-button>
    <oc-drop
      :drop-id="dropElementId"
@@ -20,17 +21,12 @@
          v-for="(option, index) in setting.multiChoiceValue.options"
          :key="getOptionElementId(index)"
        >
-          <label :for="getOptionElementId(index)">
-            <input
-              :id="getOptionElementId(index)"
-              type="checkbox"
-              class="oc-checkbox"
-              :value="option"
-              v-model="selectedOptions"
-              @change="onSelectedOption"
-            />
-            {{ option.displayValue }}
-          </label>
+          <oc-checkbox
+            v-model="selectedOptions"
+            :option="option"
+            @input="onSelectedOption"
+            :label="option.displayValue"
+          />
        </li>
      </ul>
    </oc-drop>
--- a/settings/ui/components/settings/SettingNumber.vue
+++ b/settings/ui/components/settings/SettingNumber.vue
@@ -12,10 +12,10 @@
      />
    </div>
    <div v-if="isChanged">
-      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+      <oc-button @click="cancel" class="oc-ml-s">
        <translate>Cancel</translate>
      </oc-button>
-      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+      <oc-button @click="applyValue" class="oc-ml-s" variation="primary">
        <translate>Save</translate>
      </oc-button>
    </div>
--- a/settings/ui/components/settings/SettingSingleChoice.vue
+++ b/settings/ui/components/settings/SettingSingleChoice.vue
@@ -1,12 +1,13 @@
 <template>
  <div>
-    <oc-button :id="buttonElementId" class="uk-width-expand">
+    <oc-button :id="buttonElementId" class="uk-width-expand" justify-content="space-between">
      <span v-if="selectedOption">
        {{ selectedOption.displayValue }}
      </span>
      <span v-else>
        {{ setting.placeholder || $gettext('Please select') }}
      </span>
+      <oc-icon name="expand_more" />
    </oc-button>
    <oc-drop
      :drop-id="dropElementId"
@@ -21,17 +22,12 @@
          v-for="(option, index) in setting.singleChoiceValue.options"
          :key="getOptionElementId(index)"
        >
-          <label :for="getOptionElementId(index)">
-            <input
-              :id="getOptionElementId(index)"
-              type="radio"
-              class="oc-radiobutton"
-              v-model="selectedOption"
-              :value="option"
-              @change="onSelectedOption"
-            />
-            {{ option.displayValue }}
-          </label>
+          <oc-radio
+            v-model="selectedOption"
+            :option="option"
+            @input="onSelectedOption"
+            :label="option.displayValue"
+          />
        </li>
      </ul>
    </oc-drop>
--- a/settings/ui/components/settings/SettingString.vue
+++ b/settings/ui/components/settings/SettingString.vue
@@ -10,10 +10,10 @@
      />
    </div>
    <div v-if="isChanged">
-      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+      <oc-button @click="cancel" class="oc-ml-s">
        <translate>Cancel</translate>
      </oc-button>
-      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+      <oc-button @click="applyValue" class="oc-ml-s" variation="primary">
        <translate>Save</translate>
      </oc-button>
    </div>